ブログ練習帳

CSSでナビボタンを作る　背景画像の切り替えその3

CSSでコントロールしてナビゲーションボタンを作っていて、不思議なことに出くわしました。

次の二つのコード、見てください。

サンプル１

(X)HTML

<ul>

<li><a href="#"><img src="img/navbtn01.gif" width="100" height="50" alt="ナビボタン" /></a></li>

<li><a href="#"><img src="img/navbtn01.gif" width="100" height="50" alt="ナビボタン" /></a></li>

<li><a href="#"><img src="img/navbtn01.gif" width="100" height="50" alt="ナビボタン" /></a></li>

<li><a href="#"><img src="img/navbtn01.gif" width="100" height="50" alt="ナビボタン" /></a></li>

</ul>

CSS

*{
	margin:0;
	padding:0;
}
ul {
	width:400px;
	margin:0 auto;
}
li {
	float: left;
	list-style-type:none;
	width:100px;
	height:50px;
	background-image:url(img/navbtn02.gif);
}
a {
	display:block;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-position:0 0;
	text-decoration:none;
	
}
a img {
	border:none;
}
a:hover {
	visibility:hidden;	
}

サンプル１はこちら

---

サンプル２

(X)HTML

<ul>

<li><a href="#"><span><img src="img/navbtn01.gif" width="100" height="50" alt="ナビボタン" /></span></a></li>

<li><a href="#"><span><img src="img/navbtn01.gif" width="100" height="50" alt="ナビボタン" /></span></a></li>

<li><a href="#"><span><img src="img/navbtn01.gif" width="100" height="50" alt="ナビボタン" /></span></a></li>

<li><a href="#"><span><img src="img/navbtn01.gif" width="100" height="50" alt="ナビボタン" /></span></a></li>

</ul>

CSS

*{
	margin:0;
	padding:0;
}
ul {
	width:400px;
	margin:0 auto;
}
li {
	float: left;
	list-style-type:none;
	width:100px;
	height:50px;
	background-image:url(img/navbtn02.gif);
}
a {
	display:block;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-position:0 0;
	text-decoration:none;
	
}
a img {
	border:none;
}
a:hover span{
	visibility:hidden;
}

サンプル２はこちら

---

どちらも通常時の画像をimgでHTML内に張り込んで、hoverのときは、見えなくなるようにvisibility:hiddenをつけて、親要素であるliの背景画像を見せるという考え方です。

違いは、サンプル２のほうでは、HTMLでimgをspanで囲ってあること。CSSでは、hoverのときにvisibility:hiddenを設定するのが、a:hoverではなく、a:hoverの中にあるspanです。

たったこれだけの違いですが、なぜかサンプル２のほうが、hoverの画像の読み込みがはやい、というか、ちらつかないです。

IE8とFire Fox8で試してみましたが、両方とも、サンプル１ではがたがたちらつくのに、サンプル２はそんなに気にならないです。プリロード的な違いはないように思えるし、なぜでしょう…。はて。

2011年12月23日1:53 AM| カテゴリー： HTMLとCSSのコード,見習い奮闘記| コメント (0)