• かちびと.net

    CSSのみでマウスオーバー時にリンク先のURLをツールチップで表示させる方法をご紹介します。擬似要素を使いますので対応ブラウザはIE8移行と他のモダンブラウザになります。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

CSSのみでマウスオーバー時にリンク先のURLをツールチップで表示させる

スポンサーリンク

cssの小技的な内容です。さほど使う機会は無さそうなんですけど、JavaScriptを使うほどでも無いようなものなのでcssだけでやって見た、みたいな記事。リンクにマウスを乗せるとそのリンク先のURLをツールチップとして表示させます。

対応ブラウザはモダンブラウザとIE8以上です。:afterを使うのでIE7以下は対応できません。

cssでリンク先のURLを表示する

まずはcssのみでリンク先のURLを表示させます。
マークアップは以下で固定。

<a href="http://kachibito.net/">かちびと.net</a>

HTMLはこのままで、cssのみでリンク先のURLをマウスオーバーによるツールチップで表示させます。

URLを表示させる

まずはURLを表示させます。

a[href]:after {
	content: attr(href);
	}

これはよく印刷用のcssで用いられる手段で、印刷する際に、URLも表示してあげると親切ですよね、っていうやつ。詳しくはRedLine Magazineさんの記事をご覧下さい。
とりあえず実装です↓

かちびと.net

リンク先が表示されました。

このように表示されるURLをマウスオーバーによるツールチップで表示させよう、というのが今日の内容です。

:afterをツールチップとして表示させる

a[href]:after {
	content: attr(href);
	margin-left: 1px ;
	display: block;
	border: solid 1px #d3d2d2;
	color: #666;
	text-decoration: none;
	position: absolute;
	top: 20px;
	left: 10px;
	padding: 5px;
	visibility: hidden;
	width: 150px;
	z-index: 10;
	}
a{ text-decoration:none;color: #000 ;position: relative;}

a:hover,
a:hover:after{
	visibility: visible;
	z-index: 100;
	}

このツールチップ表示方法は少し前に書いた地味に使えるCSS小技のメモに書いています。

擬似要素で表示させたURLをツールチップとして実装します。↓

かちびと.net

マウスを乗せるとツールチップが表示されるようになりました。

もうちょい工夫してみる

そっけないとなんだか怪しいので少しデザインして表示する意味を持たせます。

a[href]:after {
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight:bold;
	font-size: 16px ;
	content: "リンク先はこちら: "attr(href)" ";
	margin-left: 1px ;
	display: block;
	border: solid 1px #d3d2d2;    

	background-image:
		-webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.34, rgb(250,250,250)),
		color-stop(1, rgb(224,224,224)),
		color-stop(1, rgb(237,234,237))
		);

	background-image:
		-moz-linear-gradient(
		center bottom,
		rgb(250,250,250) 34%,
		rgb(224,224,224) 100%,
		rgb(237,234,237) 100%
		);

	color: #09549f ;
	text-decoration: none;
	position: absolute;
	bottom: 25px;
	left: 25px;
	padding: 15px 25px 15px 25px;
	visibility: hidden;
	width: 270px;
	z-index: 10;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
	border-radius: 7px ;
	text-shadow:1px 0 1px rgba(255, 255, 255, 0.9);
	}

a{
	text-decoration:none;
	position: relative;
	}

a:hover,
a:hover:after{
	visibility: visible;
	z-index: 100;
	}

contentに定型テキストを含めました。
実装↓

かちびと.net

装飾されました。HTMLは変えていません。

雑感

これはこれでなかなか親切じゃないかなとは思います。デザインはもっと工夫できそうですね。背景はcss3のグラデーションを使いましたが、画像を使って工夫すればもっと親切なツールチップも作れるかなと思います。
正直ここまで長くなるならjs使ったほうが良いに決まってますけど、使えない状況なら選択肢になるんじゃないですかね。分かりませんけどw

以上、CSSのみでリンク先をツールチップで表示させる方法でした。

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services