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;
}

但是这不起作用......我认为锚必须是目标而不是图像.我一直在谷歌周围寻找,似乎没有人知道如何做到这一点,除非通过使用特定的类或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;
}

Answer 2

抱歉，您想要的是某种 :parent 伪类，它选择子级但适用于父级，不幸的是，它不存在（甚至在 CSS3 中也不存在）。

您必须执行一些 Javascript，选择与#sidebar a:hover匹配的所有元素，然后在它们没有子 IMG 元素的情况下应用红色底部边框。