【htmlファイル】
<div class="port">
<a href="port.html"><div><li><img src="images/port.jpg">ポート</li></div></a>
</div>
【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ファイルで画像でリンクする方法教えて下さい！
No.2
38
5
100pt
＜div class="port"＞
＜li＞＜a href="リンク先１"＞ポート＜/a＞＜/li＞
＜li＞＜a href="リンク先２"＞ポート２＜/a＞＜/li＞
＜/div＞
li{
float: left;}
.port a{
display: block;
background-image:url("画像１");
width:202px;
height:107px;
text-indent: -5000px;}
.port a:hover{
background-image:url("画像２");}
liも入れました。
HTMLのタグの括弧は、半角に打ち直して下さい。
liにクラスを設定して打つのはOKですが、liの外にaはしない。
No.1
385
27pt
【htmlファイル】 カッコが全角になってますのでコピペでは使えません
＜div class="port"＞
＜a href="リンク先"＞ポート＜/a＞
＜/div＞
【CSSファイル】
.port a{
display: block;
background-image:url("画像１");
width:202px;
height:107px;
text-indent: -5000px;}
.port a:hover{
background-image:url("画像２");}
単純にはこれだけです。
＜a class="port" ...... として、
a.port {}
a.port:hover{}
で指定すればもっと短い。
囲ったりする必要があるならば囲えば良いですが、「li」や「div」を「a」に入れるのはどうなのかと思います。
floatは、メニューを並べるのに「li」をfloatさせたいのでは無いですか？
background-positionは、画像の位置を指定する必要がある場合に使って下さい。
回答ありがとうございす。
port a:hover{
background-image:url("画像２");}試してみました。なんだかできない。。
a.port {}もできない。。
そうなんです！メニューを並べるためなんです。
liの外にaを入れるとリンクが出来たので…外や無い状態だとリンクの表示がなくなっちゃって。。
何か、きっと問題があるんでしょうね。。うーん。。
「li」や「div」を「a」に入れるのはどうなのかとのことで…
＜li class＞ ＜/li＞にしてみました。
リンクされないし、画像も変更されないですね。。
No.2
385
ここでベストアンサー
100pt
＜div class="port"＞
＜li＞＜a href="リンク先１"＞ポート＜/a＞＜/li＞
＜li＞＜a href="リンク先２"＞ポート２＜/a＞＜/li＞
＜/div＞
li{
float: left;}
.port a{
display: block;
background-image:url("画像１");
width:202px;
height:107px;
text-indent: -5000px;}
.port a:hover{
background-image:url("画像２");}
liも入れました。
HTMLのタグの括弧は、半角に打ち直して下さい。
liにクラスを設定して打つのはOKですが、liの外にaはしない。
わぁー！！
教えていただいた記述で解決できました！本当にありがとうございます！！
No.3
31
100pt
< div class="port">
< ul>
< li>< a href="port.html">ポート< /a>< /li>
< /ul>
< /div>
にhtml側を書き直していただけますか？
そして、ご自身がかかれたcssのソースの
.port {
を
.port a{
に直して再トライしてみてください。
html側ですが
aはインライン要素ですので子供にブロック要素であるdivやliを持てません。
そしてliの親はulかolです。
ｃｓｓですが
.port a｛はportクラスの中のaを指定します。
a.port {}だとa要素の中でもportクラスのみという指定でa自身にportクラス指定しているもののみが対象となります。
詳しい説明ありがとうございます。今回の問題点が理解できました！！
1
1
25
23
わぁー！！
教えていただいた記述で解決できました！本当にありがとうございます！！