Css 如何更改悬停时文本链接而不是图像链接上的背景色

我有这样一个CSS规则：

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

但这会导致图像链接底部出现不好的间隙，更糟糕的是，如果我有透明图像，链接的背景色可以通过图像看到

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

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

今天我在寻找一个更优雅的解决方案时，无意中发现了这个问题

基本上，它建议使用

display:block

，这确实解决了不透明图像的问题。然而，这导致了另一个问题：现在链接与段落一样宽，尽管图像不宽

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

谢谢，

未经测试的想法：

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

以下各项应有效（未经测试）：

首先是你

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

那你呢

a:imagelink:hover { background-color: inherit; }

第二条规则将覆盖第一条规则，并保留父项的背景色

---

我尝试在没有class=”的情况下执行此操作，但我找不到与foo>bar相反的CSS选择器，当它是foo的子对象时，它会为一个条设置样式。当foo有一个子类bar时，您可能希望对其进行样式设置。您可以使用jQuery实现这一点，甚至可以实现更高级的功能，但作为一种通用技术，这可能并不可取。

您可以使用display:inline块，但这并不是完全的交叉浏览器。IE6和更低版本将有问题

我假设您在

和

之间有空格？尝试按如下方式删除该选项：

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

---

我对你所说的“图像链接”感到困惑。。。那是锚内的“img”标签吗？或者您是在CSS中设置图像

如果您在CSS中设置图像，那么这里没有问题（因为您已经能够将其定位）。。。所以我必须假设你的意思是：

<a ...><img src="..." /></a>

---

我试图找到一些选择器，这些选择器只能获取没有子体的

元素，但找不到任何。。。 关于具有该底部间隙的图像，您可以执行以下操作：

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

这应该可以去除图像后面的背景，但是可能会影响布局（虽然不会太多），所以要小心

对于透明图像，应该使用类

---

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

我通常会这样做来消除图像下的间隙：

img {
  display: block;
  float: left;
}

---

当然，这并不总是理想的解决方案，但在大多数情况下都很好。

我今天遇到了这个问题，由于asker的链接，我使用了另一种解决方案，而不是

display:block

。这意味着我只能在图像上保留链接，，而不能将其扩展到其容器中

图像是内联的，所以它们下面有空间放置字母的下部，如“y，j，g”。这会将图像定位在

基线处

，但如果此处没有

文本

，则可以更改图像，如带有徽标。但是，如果使用纯色作为背景（例如在

body

或

div#wrapper

中），您仍然需要屏蔽文本行空间，这样做很容易

---

这样效果更好

a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
    text-decoration: none;
    border: 0 none;
    background-color: transparent;
    }

无需对每个图像应用繁琐的类。详细说明如下：

---

我也有同样的问题。在我的例子中，我使用图像作为背景。我做了以下操作，解决了我的问题：

background-image: url(file:"use the same background image or color");

---

这是行不通的，因为我没有改变图像的背景颜色，而是改变链接的背景颜色。另外，我认为IE除了链接之外不支持任何伪类。我想应该是a.imagelink:hover{background color:inherit；}这解决了OP的问题，但不是OP标题的答案

background-image: url(file:"use the same background image or color");