css - 如何在悬停时更改文本链接的背景颜色而不是图像链接

Question

我有这样的 CSS 规则:

a:hover { background-color: #fff; }

但这会导致图像链接底部出现难看的空隙，更糟糕的是，如果我有透明图像，则可以透过图像看到链接的背景颜色。

我以前多次偶然发现这个问题，但我总是使用为图像链接分配类的快速而肮脏的方法来解决它:

a.imagelink:hover { background-color: transparent; }

今天，当我偶然发现 this 时，我正在寻找一个更优雅的解决方案来解决这个问题。 .

基本上它建议的是使用display: block，这确实解决了非透明图像的问题。然而，这会导致另一个问题:现在链接和段落一样宽，尽管图像不是。

有没有好的方法可以解决这个问题，还是我必须再次使用肮脏的方法？

谢谢，

Answer 1

我试图找到一些只能得到 <a> 的选择器没有 <img> 的元素后代，但找不到任何...对于具有底部间隙的图像，您可以执行以下操作:

a img{vertical-align:text-bottom;}

这应该可以消除显示在图像后面的背景，但可能会影响布局(虽然影响不大)，所以要小心。

对于透明图像，你应该使用一个类。

我真的希望通过实现父选择器在 CSS3 中解决这个问题。