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

您无法根据元素的子元素来定位元素，因此您必须在代码中添加一些内容以定位不同的链接。

你不能使用下划线而不是底边框吗？这将适用于它应用于链接中的文本而不是链接元素本身。

#sidebar a:hover { text-decoration: underline; }
#sidebar a:hover img { text-decoration: none; }

Answer 3

对不起，你想要的是某种：父伪类，它选择了孩子，但是适用于父母，遗憾的是不存在（甚至不在CSS3中）。

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

Answer 4

这可能有效

a img {position:relative; top: Npx}, where N is the hover border thickness

这会使图像覆盖边框，尽管它会向下移动一个像素左右。

Answer 5

尝试这个技巧。它有效。

a { text-decoration:none; border-bottom:2px solid; }

a img { border:none; vertical-align:top; }

另一种方式 - PHP：

$text = preg_replace('#<a(.*?)<img(.*?)/>(.*?)</a>#is', "<a class='imgshow' \\1 <img\\2 />\\3</a>", $text);

Answer 6

使用a:not(img) a:hover {style:whatever;}可以使用css3，但有一些注意事项。以下是图片说明：http://nerdinprogress.blogspot.com/2010/11/target-text-links-but-not-images-with.html

Answer 7

简单的方法是使用

:hover (text-decoration: underline}

另见

text-underline-position

http://dev.w3.org/csswg/css3-text/#text-underline-position0

Answer 8

在没有添加新标签的情况下，纯CSS无法实现这一点。为了使用纯CSS / HTML执行此操作，您需要在图像的[a href]链接中添加标记..或者将标记添加到要用下划线显示的[a hrer]链接。 / p>

你可以在javascript中编写一小段代码，它可以很容易地改变悬停元素的border属性。您只需要检查该元素是否为IMG。

Answer 9

这实际上似乎是一个相当困难的问题。您是否有能力更改CMS的代码？如果您可以执行诸如在链接内的任何文本周围包裹<span>之类的内容（并将图像保留在其外部），这将变得很容易。然后你所要做的就是将#sidebar a:hover span定位到边界。

如果您无法更改代码，我不确定这是否可行。我当然不能想出任何东西。

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

9 个答案: