リンク画像のマウスオーバー時の下線を消したい。（a:hover 関連。

質問

テキストリンクについては、マウスオーバー時に下線が表示されても良いのですが、画像リンクについては下線を表示させたくないと考えています。
どうやったら、切り分けられますでしょうか。

現在、cssファイル内にて、
----------------
a:hover {
color: #色;
border-bottom: 1px solid #色;
}
-----------------
と書いてあり、これがテキストリンクにも画像リンクにも影響しています。
-------------------
【CSS】
img{
border:0;
}
--------------------
ではダメでした。

-------------------------
【HTML】
<a href="リンク先" class="img"><img src="画像URL"></a>

【CSS】
.img a:hover {
border-bottom:0px;
}
-------------------------
→これでもダメでした。

どなたかご助言よろしくお願いします。

回答No.6

aboutworks

<a href="リンク先" class="img"><img src="画像URL"></a>
というようにマーク付けしているなら、

単純に

a.img:hover{
border : none ;
}

で解決すると思いますが。

お礼

ありがとうございました（＾＾）
また何かありましたら、教えて下さいね。

補足

回答をありがとうございます。

実際に試してみました。
この方法でもイケマスネ。
素晴らしいです。
私のものより、これこそベストな回答だと思いました。

NO１の回答者の方は、

<a href="リンク先" class="img"><img src="画像URL"></a>
に適用するなら
a:hover .img{border:none;}

と説明されていましたが、
こちらではダメで、

a.img:hover{
border : none ;
}
こういった順序だとスタイルは上手く効くんですね。
順序を正確に理解していないとダメだということが分かりました。
これから勉強していきます。
回答を締め切らずに待っていて正解でした。
素晴らしい回答をありがとうございました。