CSSで実現するスマートなロールオーバー

暇があればコーディングコンテストの作品を眺めているのですが、ほんと勉強になります。
長谷川賞を受信したComplexさんが行っていたロールーオーバーの手法が、JavasScriptも画像置換も使わずにと素敵だったので紹介します。

サンプルはボクの方でアレンジしていますので、オリジナルも合わせて参考にお願いします。

まずサンプルのXHTMLソース

<ul>
	<li class="ajaBtn"><a href="/ajax/"><img src="ajax_a.gif" alt="ajax" /></a></li>
	<li class="amaBtn"><a href="/amazon/"><img src="amazon_a.gif" alt="amazon" /></a></li>
	<li class="cssBtn"><a href="/css/"><img src="css_a.gif" alt="css" /></a></li>
	<li class="htmBtn"><a href="/html/"><img src="html_a.gif" alt="html" /></a></li>
</ul>

ul,li要素にimg要素が入っているシンプルなソース。

次にCSSソース

li{
	list-style-type:none;
	width:150px;
	height:50px;
	float:left;
}
li img{
	border:0;
}
li.ajaBtn{
	background:url(./ajax_b.gif);
}
li.amaBtn{
	background:url(./amazon_b.gif);
}
li.cssBtn{
	background:url(./css_b.gif);
}
li.htmBtn{
	background:url(./html_b.gif);
}
li a{
	display:block;
	width:150px;
	height:50px;
}
li a:hover {
	background-color:transparent;
}
li a:hover img{
	visibility:hidden;
}

サンプル

li要素の背景にロールオーバー時の画像を配置しておき、a要素にマウスがかかった際にimg要素のvisibilityをhiddenにして対応しています。

ポイントはある程度大きいボタンを利用する場合は、a要素のheightのサイズをとっておくこと。

これ、はやりそうな気がします。

追記(2007/06/18)

ie6で動かないの指摘を受けて、a:hover {background-color:transparent;}を追加しました。

関連エントリー

画像置換
cssで画像をプリロードする方法（改
一番簡単な画像置換の方法
画像置換でメニューを作る
画像置換に関する考え方
BIR-もうひとつの画像置換

スポンサードリンク

«WebクリエイティブのためのDOM Scripting | メイン | キーワード出現頻度解析リリースのお知らせ»