CSSでロールオーバーを実装する3つの方法 その3さて、前回はWeb制作の際の必須の技術とも言えるCSSでロールオーバーを実装する方法の二つ目として、CSSスプライトを使った方法2(ネガティブマージンを使用)をご紹介しました。今回は3つ目の方法をご紹介します。

ここで紹介するロールオーバーを実装する3つの方法

  1. CSSスプライトを使った方法1(background-positionを使用)
  2. CSSスプライトを使った方法2(ネガティブマージンを使用)
  3. CSSの背景と画像を重ねる方法(hover時にvisibility:hiddenを使う) ←今回

3. CSSの背景と画像を重ねる方法(hover時にvisibility:hiddenを使う)

さて、今回は制作するナビゲーションメニューの各画像(上段)とマウスホバー(hover)時の全体の画像(下段)を別々に作成します。各メニューの画像は幅91px高さ28pxで、マウスホバー(hover)時の画像は、全体の幅455px高さ28pxになります。

ナビメニューのロールオーバー画像

それでは、まずXHTMLのマークアップから始めます。
下記のように、ナビゲーションの各メニューをリストで実装して、各リストにはそれぞれのナビゲーションの画像を配置し、アンカータグで囲みます。

//ナビゲーションメニュー
<ul id="navi_menu3">
     <li><a href="#"><img src="images/navi03_01.jpg" width="91" height="28" alt="Home"></a></li>
     <li><a href="#"><img src="images/navi03_02.jpg" width="91" height="28" alt="About me"></a></li>
     <li><a href="#"><img src="images/navi03_03.jpg" width="91" height="28" alt="Gallery"></a></li>
     <li><a href="#"><img src="images/navi03_04.jpg" width="91" height="28" alt="Link"></a></li>
     <li><a href="#"><img src="images/navi03_05.jpg" width="91" height="28" alt="Contact"></a></li>
</ul>

次にCSSを書いていきます。まず、ナビメニュー全体のulタグの背景にマウスホバー(hover)時に表示させたい画像を指定します。そして、この場合のメニュー全体の大きさは、幅455px高さ28pxを設定します。

//CSS
ul#navi_menu3 {
background:url(images/navi03_hover.jpg) no-repeat;
width:455px;
height:28px;
}

次に、この場合のリストの幅は全て幅91px高さ28pxですので、高さと幅をそれぞれリスト要素に設定し、フロートさせてリスト要素を横並びにします。また、リンク要素には必ず、display:block;を指定します。最後に、マウスホバー時のimg要素の画像を表示させないよう、visibility:hidden;を設定します。

ul#navi_menu3 li {
width:91px;
height:28px;
float: left;
}
ul#navi_menu3 li a  {
display: block;
}
ul#navi_menu3 li a:hover img {
visibility: hidden;
}

以上で完成です。
今回でCSSでロールオーバーを実装する3つの方法は終わりです。
ロールオーバーはjavascriptを使った方法や、jQueryを使ってアニメーション表示させる方法など、 他にもさまざまな実装方法がりますので、機会があればまたご紹介できればと思っております。