CSS-目标文本链接在悬停时带有底部边框，但图像链接没有边框

Question

我希望能够在悬停时使用 border-bottom 定位 CSS 中的文本链接， 但所有图片链接都没有悬停边框。所以:

<a href="#"><img src="image.png"  /></a>  ==> this should not have a bottom-border on hover
<a href="#">regular text link</a> ==> this should have a bottom-border on hover

我试过这个 CSS:

#sidebar a:hover {
  border-bottom: 1px dotted red;
}
#sidebar a:hover img {
  border-bottom: none;
}

但这行不通……我认为 anchor 必须是有针对性的而不是图像。我一直在谷歌周围搜索，似乎没有人知道如何做到这一点，除非通过使用特定类或 id 定位图像链接，或者使用 display:block。

但是，我不能使用这些解决方案，因为内容在 CMS 中，所以我不希望用户必须为他们插入的每个图像分配一个类。并且 display:block 不起作用，因为我不知道这是否适合用户想要显示的每张图像。

最后，我希望能够使用纯 CSS(无 Javascript)来完成此操作。也许没有办法...但是如果您有任何帮助或想法，我们将不胜感激!

Answer 1

就 JavaScript 而言，我建议使用 jQuery向所有包含图像的链接添加一个类:

$('#sidebar a:has(img)').addClass('image-link');

(:has 选择器是 jQuery 的东西；它不存在于 CSS 中。)

然后相应地调整您的样式表。

#sidebar a:hover {
  border-bottom: 1px dotted red;
}
#sidebar a.image-link:hover {
  border-bottom: none;
}