高さが違う画像置換
こんにちは、ゼノフィ渡部です。
高さが違う画像をhover時に表示する方法をご紹介いたします。
下記のような隣り合う、高さが違う画像を用意します。

a要素の背景で表示します。1行目の「ol.diff_navi li a」でa要素に対して通常時に表示させる画像の幅、高さが大きい方の画像のheightを指定し、「background: url(bg_diff_navi.gif) no-repeat;」で使用する画像を決めます。9行目の「background: url(bg_diff_navi.gif) no-repeat -100px;」でホバー時の画像と位置を指定しています。「-100px」はマウスがa要素にホバーした時、右にスライドして高さが大きい方の画像を表示させています。
1 2 3 4 5 6 7 8 9 10 | ol.diff_navi li a { display: block; width: 100px; height: 34px; /* 高さが大きい方の画像のheightを指定 */ background: url(bg_diff_navi.gif) no-repeat; /* 使用する画像を指定 */ } ol.diff_navi li a:hover { background: url(bg_diff_navi.gif) no-repeat -100px; /* ホバー時の画像と位置を指定 */ } |
ナビゲーション形式で記述しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <ol class="diff_navi"> <li> <a href="#"> <span> ナビ1 </span> </a> </li> <li> <a href="#"> <span> ナビ2 </span> </a> </li> <li> <a href="#"> <span> ナビ3 </span> </a> </li> </ol> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | ol.diff_navi { width: 400px; overflow: hidden; margin: 0; padding: 0; border-bottom: 3px solid #B7B7B7; } ol.diff_navi li { list-style-type: none; float: left; margin: 0 10px 0 0; } ol.diff_navi li a { display: block; width: 100px; height: 34px; /* 高さが大きい方の画像のheightを指定 */ background: url(bg_diff_navi.gif) no-repeat; /* 使用する画像を指定 */ } ol.diff_navi li a:hover { background: url(bg_diff_navi.gif) no-repeat -100px; /* ホバー時の画像と位置を指定 */ } ol.diff_navi li a span { display: block; padding: 13px 0 0 0; font-size: 12px; text-align: center; } |
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <ol class="diff_navi"> <li> <a href="#"> <span> ナビ1 </span> </a> </li> <li> <a href="#"> <span> ナビ2 </span> </a> </li> <li> <a href="#"> <span> ナビ3 </span> </a> </li> </ol> |