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中解决。

Answer 2

我对你所谓的“图片链接”感到困惑......是一个锚点内的'img'标签吗？或者你在CSS中设置图像？

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

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

我建议您在图像上指定背景颜色......所以，假设中的容器应为白色...

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

Answer 3

我通常会做这样的事情来消除图像下的差距：

img {
  display: block;
  float: left;
}

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

Answer 4

这种方式更好。

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

不必将繁琐的类应用于每个图像。详细说明如下：

http://perishablepress.com/press/2008/10/14/css-remove-link-underlines-borders-linked-images/

Answer 5

未经考验的想法：

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

Answer 6

以下内容应该有效（未经测试）：

首先你

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

然后你

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

第二条规则将覆盖第一条＆lt; a class =“imagelink”等＆gt;并保留父母的背景颜色。

我尝试在没有class =“”的情况下这样做，但我找不到与foo相反的CSS选择器＆gt; bar，当它是foo的孩子时为它设置样式。当一个类bar的子项时，你会想要设置foo的样式。你可以用jQuery做到这一点，甚至是更好的东西，但这可能不是一般技术所希望的。

Answer 7

你可以使用display：inline-block但这不是完全的crossbrowser。 IE6及更低版本会有问题。

我假设您在<a>和<img>之间有空格？尝试删除这样：

<a><img /></a>

Answer 8

我今天遇到了这个问题，并且使用了display: block以外的其他解决方案，这要归功于提问者的链接。这意味着我可以在图片上保留 ONLY 链接，而不是将其展开到容器中。

图像是内联的，因此它们的下方有空格，用于“y，j，g”等字母的下半部分。这会将图片定位在baseline，但如果您没有<a>TEXT HERE</a>喜欢徽标，则可以对其进行更改。但是，如果您使用纯色作为背景（例如在body或div#wrapper中），您仍然需要屏蔽文本行空间并且它很容易。

body {
  background-color: #112233; 
}
a:hover {
  background-color: red;
}
a img {
  border-style: none; /* not need for this solution, but removes borders around images which have a link */
  vertical-align: bottom; /* here */
}
a:hover img {
  background-color: #112233; /* MUST match the container background, or you arent masking the hover effect */
}

Answer 9

我遇到了同样的问题。在我的情况下，我使用图像作为背景。我做了以下事情，它解决了我的问题：

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

如何在悬停但不是图像链接上更改文本链接上的背景颜色

9 个答案: