マウスオーバーで表示画像変更 〜CSSマジックその１〜
CSSってアイデア次第で使えるんだなーってことを最近実感している今日この頃です。
AJAXが人気になって、クライアントプログラムを活用しようっていう空気が生まれた中、JavaScriptと共にCSSも見直され新たな使い方をされるようになってきていると思う。
僕が注目したのが最近だからっていう落ちがたぶんに多いとは思うけど、CSSをあつかっている書籍やウェブサイトは確実に増えたと思う。
書籍にも載っていた目から鱗(僕が・・)のCSSテクニックをひとつ紹介。
CSSテクニック１ マウスオーバーで表示画像を変更する
よくウェブサイトのナビゲイションバーなんかに利用されているんで知っている人も多いと思います。
このテクのキモは、
- すべてのタグは背景画像を指定することが出来る。
- hoverセレクタを使うことで、マウスオーバー時の動作を指定できる（ただし、IEでhoverセレクタが有効なのはaタグのみ）。
- タグにdisplay:blockを適用するとタグの幅や高さの指定が有効になる（display:blockを適用しないと、幅や高さを設定しても無効となってしまう）。
サンプルには、可愛いので土屋アンナさんに登場してもらってます。
★ソースコード
【スタイルシート】
<style type="text/css">
ul {
list-style: none;
height: 150px;
}
li {
position: relative;
float: left;
list-style: none;
height: 100px;
width: 100px;
font-size: 0.8em;
margin: 0;
padding: 0;
}
li a {
display: block;
height: 100px;
width: 100px;
margin: 0;
padding: 0;
text-decoration: none;
color: #357;
}
li a:hover {
color: #2266ff;
}
li a span {
position: absolute;
width: 100px;
top: 110px;
left: 80px;
}
li a.anna1 {
background: transparent url(http://f.hatena.ne.jp/images/fotolife/e/ex_odus/20060310/20060310162949.jpg) top left no-repeat;
}
li a:hover.anna1 {
background: transparent url(http://f.hatena.ne.jp/images/fotolife/e/ex_odus/20060310/20060310162916.jpg) top left no-repeat;
}
li a.anna2 {
background: transparent url(http://f.hatena.ne.jp/images/fotolife/e/ex_odus/20060310/20060310162937.jpg) top left no-repeat;
}
li a:hover.anna2 {
background: transparent url(http://f.hatena.ne.jp/images/fotolife/e/ex_odus/20060310/20060310162926.jpg) top left no-repeat;
}
li a.anna2 span {
margin-top: 17px;
margin-left: -100px;
}
</style>
【タグ】
<ul>
<li><a class="anna1" href="#"><span>土屋アンナ1</span></a></li>
<li><a class="anna2" href="#"><span>土屋アンナ2</span></a></li>
</ul>
