CSSでリンクの表示をテキストと画像で変えたい

質問

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">

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

回答No.1

mognol_n · ベストアンサー

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>

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

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

回答No.2

mognol_n

基本的にスタイルシートは該当するものをすべて適用します。
この場合<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も記述すればそちらが適用されます。

お礼

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