CSS-在悬停时以底边框为目标的文字链接，但没有边框的图片链接 [英] CSS- target text links with bottom border on hover, but image links with no border

问题描述

我想在CSS中以文字链接为目标，悬停时使用border-bottom，
，但是所有链接都是没有悬停边框的图片。所以：

I'd like to be able to target text links in CSS with border-bottom on hover, but have all links that are images not have a border on hover. So:

<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。

But this doesn't work...the anchor has to be targeted rather than the image, I think. I've been hunting around Google and no one seems to know how to do this except by targeting the image link with a specific class or id, or using display:block.

但是，我无法使用这些解决方案，因为内容是在CMS中，因此我不希望用户必须为他们插入的每个图像分配一个类。显示：块将不工作，因为我不知道这是否适合用户想要显示的每个图像。

But, I can't use these solutions since the content is in a CMS so I don't want the user to have to assign a class to each image they insert. And display:block won't work because I don't know if that would be appropriate for every image the user wants to display.

最后，我想能够在纯CSS（无Javascript）中做到这一点。

Finally, I'd like to be able to do this in plain CSS (no Javascript). Perhaps there's no way...but any help or ideas you have would be greatly appreciated!

推荐答案

对不起，你会有什么帮助或想法想要的是某种类型的父类伪类，它选择子类，但适用于父类，不幸的是它不存在（甚至不在CSS3中）。

Sorry, what you'd want is some kind of :parent pseudo-class that selects the child but applies to the parent, which unfortunately does not exist (not even in CSS3).

必须做一些Javascript，选择所有匹配 #sidebar a：hover 的元素，然后在没有子IMG元素的情况下应用红底边框。

You'd have to do a bit of Javascript, selecting all elements matching #sidebar a:hover, then applying the red bottom border on the condition that they don't have a child IMG element.

这篇关于CSS-在悬停时以底边框为目标的文字链接，但没有边框的图片链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！