我有这样的 CSS 规则:
a:hover { background-color: #fff; }
但这会导致图像链接底部出现难看的空隙,更糟糕的是,如果我有透明图像,则可以透过图像看到链接的背景颜色。
我以前多次偶然发现这个问题,但我总是使用为图像链接分配类的快速而肮脏的方法来解决它:
a.imagelink:hover { background-color: transparent; }
今天,当我偶然发现 this 时,我正在寻找一个更优雅的解决方案来解决这个问题。 .
基本上它建议的是使用display: block
,这确实解决了非透明图像的问题。然而,这会导致另一个问题:现在链接和段落一样宽,尽管图像不是。
有没有好的方法可以解决这个问题,还是我必须再次使用肮脏的方法?
谢谢,
最佳答案
我试图找到一些只能得到 <a>
的选择器没有 <img>
的元素后代,但找不到任何...
对于具有底部间隙的图像,您可以执行以下操作:
a img{vertical-align:text-bottom;}
这应该可以消除显示在图像后面的背景,但可能会影响布局(虽然影响不大),所以要小心。
对于透明图像,你应该使用一个类。
我真的希望通过实现父选择器在 CSS3 中解决这个问题。
关于css - 如何在悬停时更改文本链接的背景颜色而不是图像链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/273964/