» 画像置換-visibilityCSS TIPS with WebCreativePark

画像置換-visibilityはimg要素がhoverのときにvisibility:hidden;を行い背景の画像を表示する手法になります。

サンプルの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にして対応しています。

また、IE6はhover時のstyleが何も記述されていない場合、hoverの子孫セレクタが適応されないというバグがあるため、hover時にbackground-color:transparent;を設定します。

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