wordpressに限ったコトじゃないですがｗ
JavasScriptを使わずCSSでスマートに画像ロールオーバーさせる方法
ますスタイルシート
/*範囲*/
#rollover{
margin:0px auto auto 0px;
}
#rollover a span{
display:none;
}
ul#rollover{
list-style:none;
width:100%;/*並べる画像全部の幅*/
}
ul#rollover li{
list-style:none;
float:left;
width:100px; /*画像1枚あたりの幅*/
}
ul#rollover a{
display:block;
width:100px;/*画像1枚あたりの幅*/
height:25px;/*画像の高さの半分*/
}
/*画像を増やす場合ここから追加*/
a.link1{
background-image:url(images/roll_sample.jpg);/*画像指定*/
}
a:hover.link1{
background-position:0px -25px;/*画像の高さの半分をマイナスで*/
}
/*ここまで増やす画像ごとに追加*/
画像を用意する。上が通常時、下がマウスオーバー時で
こんな感じで、上下にならべて1枚の画像にする。
タグはコンナ感じで
<ul id="rollover“>
<li><a href=”#” class=”link1“> </a></li>
…
…
</ul>
こうなる。画像を追加する場合 <li><a href=”リンク先” class=”link1“> </a></li>部分を追加
赤文字は任意で変更。
Firefoxで見るとズレる場合がある。
んなときは、スタイルシートに
html>/**/body
#rollover{
margin:0px auto auto 0px;
padding: 0px;
}
と追加する。 ”html>/**/body”以下はFirefoxが読み直してくれる。
