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

我使用 jQuery 向所有包含图像的 a 标签添加“无悬停”类：

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

在 CSS 中我这样做了：

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

如果 jQuery 对您来说太重，您可以使用 picoQuery. 如果你选择 .each() 方法，它就只有 1k。

Answer 2

您尝试过img {border:none}吗？

Answer 3

如果您将图像浮动与内联，这将起作用，并且不需要对史蒂夫的答案所要求的图像链接属性进行修改。

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

Answer 4

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

这应该够了吧。

Answer 5

不确定这是否是最好的解决方案，但它有效：

    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 6

这在 IE 中也对我有用。 IE 显示了边框，但现在就不再显示了。

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

Answer 7

在这里找到这个例子： 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 中完美运行，删除链接中的所有效果，其中包含给定格式的图像。