acky info

連絡先

tips

web関係、制作関係でのよしなしごとを書いています。

CSSテクニック

positionを使ったCSSテクニック

フォームに関するCSSテクニック

疑似クラスを使ったCSSテクニック

リストのCSSテクニック

tableに関するCSSテクニック

左寄せ、中央寄せ、右寄せのCSSテクニック

floatを使ったCSSテクニック

CSSで作るツールチップ

ads

2008/11/27 IE6、7対策解決

画像やテキストの上にカーソルを乗せると出てくる補足解説の吹き出しをツールチップと呼びます。高度に作るにはJavascriptと組み合わせる必要がありますが、手軽なものなら疑似クラスの:hoverを使うことによりCSSだけでもツールチップをつくることができます。

この仕組みとしては、aのspanをまず隠します。そしてaが:hoverになった時にspanをdisplay:blockまたは display:inlineで表示します。後はpositionで位置を調整します。また、z-indexで上に表示されるように調整が必要な時もあります。
吹き出し風のbackground-imageなど工夫次第で結構見栄えのするツールチップを手軽に作ることができます。イラストページでこのテクニックを使っています。
a:hoverのzoom:100%;はIE7以前のためのhasLayout対策です。 IE8以降がターゲットブラウザの場合は必要ありません。

a:hover{
position:relative;
zoom:100%;
}

a span{
display:none;
}

a:hover span{
display:block;
position:absolute;
top:30px;
left:20px;
}

<a href="#">acky info
<span><img src="img/acky_info.png" /></span></a>

positionを指定せずにdisplay:inlineとした場合はaの右横に表示されます。
a:hoverのzoom:100%;はI7以前のためのhasLayout対策です。 IE8以降がターゲットブラウザの場合、a:hover{zoom:100%;}の記述は必要ありません。

a:hover{
zoom:100%;
}

a span{
display:none;
}

a:hover span{
display:inline;
position:absolute;
}

疑似クラスを使ったCSSテクニック

Copyright (C) acky. All Rights Reserved.