AIと戦って、あなたの人生のリスク診断 >>

CSSを使って、

・テキストのリンクのときは、
a:link で 常に点線のアンダーラインを表示
a:hover で マウスを重ねたとき色を変える

・画像のリンクのときは、
 アンダーラインをださない
 a:hoverの動作をさせない

という風にしたいのですがうまくいきません。

a:link {
color: black;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #333333;

}
a:hover {
background-color: black;
text-decoration: underline;
color:white;

}

といった指定をして、テキストからのリンクに適用しています。そのうえで、画像には上記の設定が生きないようにしたいと思っていますがうまくいきません。

.bordernone {
border: none;
}


と書いて、リンクの画像に

<img src="image/xx.jpg" class="bordernone" style="border-style:none">

などとしてもうまくいきません。
よろしくお願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

a要素のボーダーとimg要素のボーダーはそれぞれ別に存在します。


スタイルシートはそのままに、画像リンクの部分を、
<a href="~">=<img src="image/xx.jpg" class="bordernone" style="border:1px solid #ff0000;">=</a>
としてみるとその様子が確認できると思います。

この場合、クラスを利用し、

[スタイルシート]
a:link {
color: black;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #333333;

}
a:hover {
background-color: black;
text-decoration: underline;
color:white;
}

a.img_url:link {
border: none;
}

a.img_url:hover {
text-decoration: none;
}

[HTML]
<a href="~" class="img_url"><img ~></a>

このようにすれば良いかと思います。

この回答への補足

貴重なコメントありがとうございます。
img_url という名前のクラスを作り、画像のa hrefにそのクラスを適用するという概念はよくわかりました。

画像リンク箇所にdottedのラインは表示されなくなりました。ところがa:hover時のbackground-colorは表示されてしまいます。ブラウザは、Firefoxです。

現在、

[STYLE SHEET]
a:link {
color: black;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #333333;
}

a:visited {
color: black;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #333333;
}

a:hover {
background-color: black;
text-decoration: underline;
color:white;
}

a:active {
color:yellow;
text-decoration: none;
}

a.img_url:link {
border: none;
}

a.img_url:hover {
text-decoration: none;
}

[HTML]
<a href="http:~" class="img_url">
<img src="image/test.png"</a>

としております。
何か誤りがあるのでしょうか?

よろしくお願いいたします。

補足日時:2006/08/22 00:26
    • good
    • 0

基本的にスタイルシートは該当するものをすべて適用します。


この場合<a href="~" class="img_url">~</a>の部分には、a:hoverで定義したスタイルとa.img_url:hoverで定義したスタイルの両方が適用され、デザイン面で重複する場合はa.img_url:hoverの方が適用されます。

よって、背景色をも別にしたい場合は
a.img_url:hover {
text-decoration: none;
}
の部分にbackground-colorも記述すればそちらが適用されます。
    • good
    • 0
この回答へのお礼

ありがとうございます。
実現することが出来ました。

お礼日時:2006/08/22 16:51

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング