HTML：删除图像的 a:hover？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1030544/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML: remove a:hover for images?
提问by Marc
For textlinks, I have:
对于文本链接，我有：
CSS:
CSS：
a:link {color: #3366a9; text-decoration: none}
a:hover {border-bottom: 1px solid; color: black}
But this also adds a black underline on linkable IMGsthat I do not want.
但这也会在我不想要的可链接IMG上添加黑色下划线。
How do I remove the border-bottomon linkable IMGs when hovered using CSS?
border-bottom使用 CSS 悬停时，如何删除可链接的 IMG？
I've tried the following:
我尝试了以下方法：
a:hover img {border-bottom: 0px}
But that doesn't work
但这不起作用
Live example(try to hover over the logo in top-left)
实时示例（尝试将鼠标悬停在左上角的徽标上）
回答by Marc
If you float your images vs. inline this will work and will require no modifications to image link attributes that Steve's answer requires.
如果您浮动图像与内联，这将起作用，并且不需要修改史蒂夫的答案所需的图像链接属性。
a:hover img {
border: none !important;
display: block;
}
回答by Relster
a:hover img {border-bottom: 0px;}
That should do the trick.
这应该够了吧。
回答by Steve Echols
Not sure if this is the best solution, but it works:
不确定这是否是最佳解决方案，但它有效：
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; }
Then set the anchors with images in them to the "aimg" class:
然后将其中包含图像的锚点设置为“aimg”类：
<a class="aimg" href="Test.htm"><img src="images/myimage.gif" /></a>
回答by Andrew72nd
this worked for me also in IE. IE displayed the borders but with this it doesn't anymore.
这在 IE 中也对我有用。IE 显示了边框，但它不再显示了。
a img {/*whatever you need*/
border: none !important;
}
a img:hover{/*whatever you need*/
}
回答by Mikhail V
Found this example here: https://perishablepress.com/css-remove-link-underlines-borders-linked-images/
在这里找到这个例子：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;
}
This is exactly what you want I suppose.
Works perfect in Firefox, removes all effects from the link, which contains an image of given formats.
我想这正是你想要的。
在 Firefox 中完美运行，从包含给定格式图像的链接中删除所有效果。
回答by rosell.dk
I used jQuery to add a "no-hover" class to all a tags that contain an image:
我使用 jQuery 向所有包含图像的标签添加“无悬停”类：
$('a > img').each(function() {
$(this).parent().addClass('no-hover');
});
And in CSS i did this:
在 CSS 中，我这样做了：
a.no-hover:hover {
border-bottom: 0px
}
If jQuery is too heavy for you, you can use picoQuery. Its just 1k, if only you choose the .each() method.
如果 jQuery 对你来说太重了，你可以使用picoQuery。只要您选择 .each() 方法，它就只有 1k。
回答by Mozez
Have you tried a img {border:none}?
你试过a img {border:none}吗？
