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}

但这不起作用

Live example（尝试将鼠标悬停在左上角的徽标上）

Answer 1

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

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为包含图像的所有标记添加“no-hover”类：

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

在CSS中我做到了这一点：

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

如果jQuery对你来说过重，你可以使用picoQuery。它只有1k，如果你只选择.each（）方法。

Answer 7

您是否尝试过a img {border:none}？

HTML：删除a：悬停图片？

7 个答案: