質問: CSSでロールオーバーリンクする方法 【htmlファイル】 ポート 【CSSファイル】 .port { background-image:url("../images/○○1.jpg"); width:202px; height:107px; float: left; background-position: left; text-indent: -5000px; } .port a:hover{ background-image:url("../images/○○2.jpg"); width:202px; height:107px; } ロールオーバーできません。 指定の仕方が悪いと思ったので、a:hoverの前にli入れたりdivでくくってみたり試行錯誤したところ、一瞬できたのですが上書きする前に消してしまいました。。ふたたび再現できず質問します。 他のサイトを参考にしても、どうもうまくいきませんで。。 上記のhtmlファイルで画像でリンクする方法教えて下さい!
回答: 【htmlファイル】 カッコが全角になってますのでコピペでは使えません <div class="port"> <a href="リンク先">ポート</a> </div> 【CSSファイル】 .port a{ display: block; background-image:url("画像1"); width:202px; height:107px; text-indent: -5000px;} .port a:hover{ background-image:url("画像2");} 単純にはこれだけです。 <a class="port" ...... として、 a.port {} a.port:hover{} で指定すればもっと短い。 囲ったりする必要があるならば囲えば良いですが、「li」や「div」を「a」に入れるのはどうなのかと思います。 floatは、メニューを並べるのに「li」をfloatさせたいのでは無いですか? background-positionは、画像の位置を指定する必要がある場合に使って下さい。