HTML：画像のa：hoverを削除しますか？

Question

テキストリンクの場合、次のとおりです。

CSS：

a:link {color: #3366a9; text-decoration: none}
a:hover {border-bottom: 1px solid; color: black}

ただし、これにより、リンクできない IMG に不要な黒い下線が追加されます。

CSSを使用してホバーしたときにリンク可能なIMGの border-bottom を削除するにはどうすればよいですか？

次のことを試しました：

a:hover img {border-bottom: 0px}

しかし、それは機能しません

実際の例（上部のロゴにカーソルを合わせる-左）

Answer 1

画像とインラインをフロートさせる場合、これは機能し、Steveの答えが必要とする画像リンク属性を変更する必要はありません。

a:hover img {
border: none !important;
display: block;
}

Answer 2

a:hover img {border-bottom: 0px;}

これでうまくいくはずです。

Answer 3

これが最善の解決策かどうかはわかりませんが、動作します：

    a:link {color: #3366a9; text-decoration: none}
    a:hover {border-bottom: 1px solid black; }

    .aimg:link {color: #3366a9; text-decoration: none}      
    .aimg:hover { border-bottom: none; }

次に、画像を含むアンカーを「aimg」に設定します;クラス：

<a class="aimg" href="Test.htm"><img src="images/myimage.gif" /></a>

Answer 4

これはIEでも機能しました。 IEは境界線を表示しましたが、これではもう表示されません。

a img {/*whatever you need*/
border: none !important;
}
a img:hover{/*whatever you need*/
}

Answer 5

この例はここにあります： https://perishablepress.com/ css-remove-link-underlines-borders-linked-images /

a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
    text-decoration: none;
    border: 0 none;
    }

これはまさにあなたが望むものです。
Firefoxで完璧に動作し、特定の形式の画像を含むリンクからすべての効果を削除します。

Answer 6

jQueryを使用して「ホバーなし」を追加しました。画像を含むすべてのタグのクラス：

$('a > img').each(function() {
  $(this).parent().addClass('no-hover');
});

そしてCSSでこれを行いました：

a.no-hover:hover {
  border-bottom: 0px
}

jQueryが重すぎる場合は、 picoQuery を使用できます。 .each（）メソッドを選択した場合のみ、1kになります。

Answer 7

a img {border：none} を試しましたか？