…ここからが続き

CSSのみで画像のロールオーバー（その1）解説

デモページで使用している一枚画像はこんな感じです。

この画像をCSSのbackground-positionで表示する場所を変更して、ロールオーバーさせているって感じです。

XHTML

<ul id="globalNavi">
<li class="gnavi01"><a href="#header" title="ホーム">ホーム</a></li>
<li class="gnavi02"><a href="#header" title="サービス">サービス</a></li>
<li class="gnavi03"><a href="#header" title="リンク">リンク</a></li>
<li class="gnavi04"><a href="#header" title="会社概要">会社概要</a></li>
<li class="gnavi05"><a href="#header" title="お問い合わせ">お問い合わせ</a></li>
<!--/ #globalNavi--></ul>

CSS

#globalNavi	{
	width: 550px;
	margin-bottom: 20px;
}
#globalNavi a	{
	width: 110px;
	height: 50px;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
}
#globalNavi:after	{ height:0; visibility: hidden;	content: "."; display: block; clear: both; }
#globalNavi li	{
	float: left;
}
#globalNavi .gnavi01 a	{
	background: url(image/g_navi01.jpg) no-repeat;
}
#globalNavi .gnavi02 a	{
	background: url(image/g_navi02.jpg) no-repeat;
}
#globalNavi .gnavi03 a	{
	background: url(image/g_navi03.jpg) no-repeat;
}
#globalNavi .gnavi04 a	{
	background: url(image/g_navi04.jpg) no-repeat;
}
#globalNavi .gnavi05 a	{
	background: url(image/g_navi05.jpg) no-repeat;
}
#globalNavi a:hover	{
	background-position: 0 -50px;
}