在我的网站上，我有以下CSS：
a:hover{color:red;border-bottom:1px solid}
当悬停时，这会在文本链接上显示红色下划线，这是必需的。
但是，这也会在悬停时在图像链接上显示红色下划线，这是不可取的。
我只希望在悬停时在文本链接上显示红色下划线，但在悬停时不显示图像链接。
我有什么想法可以用CSS实现这个目标吗？
答案 0 :(得分：3)
您正在使用
设置链接样式border-bottom:1px solid red
最好使用
color: red;
text-decoration: underline;
因为图片无法加下划线。
答案 1 :(得分：1)
因为样式可能适用于锚元素，并且它也将样式应用于图像链接
a { border-bottom:1px solid red}
也适用于
<a href="somelink"> <img src="someimage.jpg"> </a>
答案 2 :(得分：0)
看作：悬停文字颜色几乎是红色，为什么不使用text-decoration: underline？
如果失败，要么有textlink类并设置border属性a.textlink { border-bottom: 1px solid red }，要么有一个imglink类并清除border属性，a.imglink { border-bottom: none; }
答案 3 :(得分：0)
您有两种选择。
第一个选项是a { color: red; text-decoration: underline; }。这具有将文本更改为红色而不仅仅是线条的缺点。如果这是可以接受的，这是最简单的方法。
如果您需要文本保留通常的颜色，事情就会复杂一些。使用CSS无法说“应用此规则除非链接中有图像标记”，所以你有点卡住了。我一直在做的是手动（或在你的CMS中，如果它是自动的）将类添加到包含图像的链接 - <a href="#" class="imagelink"><img src="#" alt="" /></a> - 并从中删除边框。
另请注意，您需要在非覆盖的链接上设置一个像素透明边框，或者由于一个像素被添加/减少到高度，页面会跳转一点包含链接的行。
答案 4 :(得分：0)
我很确定单凭CSS无法做到这一点（我想也许有些CSS伪选择器可以做到这一点，只有当我们讨论链接到更大版本的缩略图时）但是如果你已经在你的页面中使用jQuery，它可以用几行代码完成：
$('a img').each(function(){$(this.parentNode).addClass('image-link')});
并且不要忘记在CSS中添加对应的类：
a.image-link{ border:none;}
就是这样。