Question

在我的网站上，我有以下CSS：

a:hover{color:red;border-bottom:1px solid}

当悬停时，这会在文本链接上显示红色下划线，这是必需的。

但是，这也会在悬停时在图像链接上显示红色下划线，这是不可取的。

我只希望在悬停时在文本链接上显示红色下划线，但在悬停时不显示图像链接。

我有什么想法可以用CSS实现这个目标吗？

Answer 1

您正在使用

设置链接样式

border-bottom:1px solid red

最好使用

color: red;
text-decoration: underline;

因为图片无法加下划线。

Answer 2

因为样式可能适用于锚元素，并且它也将样式应用于图像链接

a { border-bottom:1px solid red}

也适用于

<a href="somelink"> <img src="someimage.jpg"> </a>

Answer 3

看作：悬停文字颜色几乎是红色，为什么不使用text-decoration: underline？

如果失败，要么有textlink类并设置border属性a.textlink { border-bottom: 1px solid red }，要么有一个imglink类并清除border属性，a.imglink { border-bottom: none; }

Answer 4

您有两种选择。

第一个选项是a { color: red; text-decoration: underline; }。这具有将文本更改为红色而不仅仅是线条的缺点。如果这是可以接受的，这是最简单的方法。

如果您需要文本保留通常的颜色，事情就会复杂一些。使用CSS无法说“应用此规则除非链接中有图像标记”，所以你有点卡住了。我一直在做的是手动（或在你的CMS中，如果它是自动的）将类添加到包含图像的链接 - <a href="#" class="imagelink"><img src="#" alt="" /></a> - 并从中删除边框。

另请注意，您需要在非覆盖的链接上设置一个像素透明边框，或者由于一个像素被添加/减少到高度，页面会跳转一点包含链接的行。

Answer 5

我很确定单凭CSS无法做到这一点（我想也许有些CSS伪选择器可以做到这一点，只有当我们讨论链接到更大版本的缩略图时）但是如果你已经在你的页面中使用jQuery，它可以用几行代码完成：

$('a img').each(function(){$(this.parentNode).addClass('image-link')});

并且不要忘记在CSS中添加对应的类：

a.image-link{ border:none;}

就是这样。

CSS：为什么我在悬停时会在图像链接上显示红色下划线？

5 个答案: