CSSでナビボタンを作る 背景画像の切り替えその3
CSSでコントロールしてナビゲーションボタンを作っていて、不思議なことに出くわしました。
次の二つのコード、見てください。
サンプル1
(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;
}
サンプル2
(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の背景画像を見せるという考え方です。
違いは、サンプル2のほうでは、HTMLでimgをspanで囲ってあること。CSSでは、hoverのときにvisibility:hiddenを設定するのが、a:hoverではなく、a:hoverの中にあるspanです。
たったこれだけの違いですが、なぜかサンプル2のほうが、hoverの画像の読み込みがはやい、というか、ちらつかないです。
IE8とFire Fox8で試してみましたが、両方とも、サンプル1ではがたがたちらつくのに、サンプル2はそんなに気にならないです。プリロード的な違いはないように思えるし、なぜでしょう…。はて。
2011年12月23日1:53 AM| カテゴリー: HTMLとCSSのコード,見習い奮闘記| コメント (0)