:hoverを使ってpianoっぽくする
:hoverを指定する事で、マウスをピアノにのせると違う画像を表示させる機能が実装できます。
html
|
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 |
<div id="content"> <h3> Web Piano Lesson -1- </h3> <table id="localnav"> <tr> <td> <li class="item01"><a href="#"><img src="images/pin/piano-1.png" width="67"></a></li></td> <td> <li class="item02"><a href="#"><img src="images/pin/piano-2.png" width="67"></a></li></td> <td> <li class="item01"><a href="#"><img src="images/pin/piano-1.png" width="67"></a></li></td> <td> <li class="item02"><a href="#"><img src="images/pin/piano-2.png" width="67"></a></li></td> <td> <li class="item01"><a href="#"><img src="images/pin/piano-1.png" width="67"></a></li></td> <td> <li class="item02"><a href="#"><img src="images/pin/piano-2.png" width="67"></a></li></td> <td> <li class="item01"><a href="#"><img src="images/pin/piano-1.png" width="67"></a></li></td> <td> <li class="item02"><a href="#"><img src="images/pin/piano-2.png" width="67"></a></li></td> <td> <li class="item01"><a href="#"><img src="images/pin/piano-1.png" width="67"></a></li></td> </tr> <tr> <td colspan="9"> <audio id="sound-file" preload="auto" controls><source src="http://yukycohamabe.ciao.jp/demo/sound/8_piano10.mp3" type="audio/mp3"></audio> </td> <tr> </table> </div> |
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 |
li { list-style: none; text-decoration: none; color: #6b8e23; font-weight: bold; } table#localnav li { position: relative; } table#localnav li a { display: block; } table#localnav { margin: 0; padding: 0; } table#localnav li.item01 a { background: url('./images/pin/piano-1hover.png') no-repeat; table#localnav li.item02 a { background: url('./images/pin/piano-2hover.png') no-repeat; table#localnav li a:hover img { visibility: hidden; } |
