HTML：删除：悬停图片？(HTML: remove a:hover for images?)

对于文本链接，我有：

CSS：

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

但是，这也增加了对我不希望联IMGS黑色下划线。

如何去除border-bottom使用CSS徘徊时，在联IMGS？

我已经试过如下：

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

但是，这并不正常工作

活生生的例子 （尽量悬停在左上方的标志）

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来“无悬停”类添加到所有包含图像的标签：

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

而在CSS我这样做：

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

如果jQuery是对你来说太沉重，你可以使用picoQuery 。 它只是1K，只要你选择。每（）方法。

Answer 7:

你有没有试过a img {border:none} ？

文章来源: HTML: remove a:hover for images?