web関係、制作関係でのよしなしごとを書いています。
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;
}
初めまして。そして、ようこそ!京都でwebデザイナー、htmlコーダーをやっているackyです。
このサイトはでイラストレーションギャラリーとCSSのテクニックを紹介しています。
イラストレーションでは、主にF1やスーパースポーツ、モータースポーツをテーマにトレース技法で描いています。イラストのポイントは直線で構成したソリッドでシャープな質感です。
CSSテクニック、webの小技ではweb制作の時にちょっと役に立つようなCSSテクニックや、positionのrelative、absoluteの使い方、リスト(li)の横並びや、リスト(li)横並びの中央寄せ、フォームのチェックボックスやラジオボタンとテキストのずれを揃える方法、Photoshopのチャンネルを使った髪の毛の切り抜き方法、お気に入りアイコン(ファビコン、webアイコン)の作り方などを紹介しています。
(このサイトについて何がありましたら左記のアドレスからご連絡をお願いします)