acky info

連絡先

tips

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

CSSテクニック

positionを使ったCSSテクニック

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

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

リストのCSSテクニック

tableに関するCSSテクニック

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

floatを使ったCSSテクニック

疑似クラス:hoverを使ったロールオーバー

ads

2009/6/26 -ms-filterを追記

マウスに反応するインタラクティブなロールオーバーを作るにはJavascriptと組み合わせるという手法もありますが、疑似クラスの:hoverを使うことによりCSSだけでも可能です。

一つ目の方法は背景画像を移動させる画像置換方法またはCSSスプライトと呼ばれる方法です。
ボタンを前提に進めているのでdisplay:block;でブロック要素に変えます。インライン要素でも背景画像を使った画像置換は可能です。
acky
上のように上下、または左右につながった画像を用意し:hoverになった時にbackgroundの座標が変わるようにコードを書きます。
この手法の場合はテキストリンクが出て欲しくない時があるのでそういう場合はtext-indent:-9999em;で画面の左端にテキストを押し出します。

a{
display:block;
width:50px;
height:50px;
background:url(img.png) no-repeat 0px 0px;
text-indent:-9999em;
}

a:hover{
background:url(img.png) no-repeat 0px -50px;
}

<a href="#">acky</a>

text-indent:-9999em;はスパムのように使わない限りは検索エンジンからスパム扱いされることはありませんがあまりいいものではありません。
そこでもう一つの方法を紹介します。
ackyacky
上のように二つの画像を用意し左はhtmlに配置し、右の画像はcssで背景画像に配置します。
:hoverになった時にhtmlのimgの透明度をコントロールし完全に透明にすることで下の背景画像が見え、画像置換したように見えます。透明度のコントロールはIE用のfilter: alpha、-ms-filter: alphaは0が完全に透明(0〜100)、モダンブラウザ用のopacityは0.0が完全に透明(0.0〜1.0)になるので以下のように指定します。

a{
display:block;
width:50px;
height:50px;
background:url(img_02.png) no-repeat 0px 0px;
}

a:hover img{
filter: alpha(opacity=0);
-ms-filter: alpha(opacity=0);
opacity: 0.0;
}

<a href="#"><img src="img_01.png"></a>

acky info

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

Copyright (C) acky. All Rights Reserved.