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

我希望能够在鼠标悬停时使用 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;
}

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

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

最后，我希望能够用纯 CSS（无 Javascript）来完成此操作。也许没有办法......但是您的任何帮助或想法将不胜感激！

就 JavaScript 而言，我建议使用jQuery http://www.jquery.com/将类添加到包含图像的所有链接：

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

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

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

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