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

I have a CSS rule like this:

我有这样的CSS规则：

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

But this results in a bad-looking gap at the bottom on image links, and what's even worse, if I have transparent images, the link's background color can be seen through the image.

但是这会导致图像链接底部的间隙看起来很糟糕，更糟糕的是，如果我有透明图像，可以通过图像看到链接的背景颜色。

I have stumbled upon this problem many times before, but I always solved it using the quick-and-dirty approach of assigning a class to image links:

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

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

Today I was looking for a more elegant solution to this problem when I stumbled upon this.

今天我偶然发现了这个问题，我正在寻找更优雅的解决方案。

Basically what it suggests is using display: block, and this really solves the problem for non-transparent images. However, it results in another problem: now the link is as wide as the paragraph, although the image is not.

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

Is there a nice way to solve this problem, or do I have to use the dirty approach again?

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

Thanks,

谢谢，

9 个解决方案

#1

I tried to find some selector that would get only <a> elements that don't have <img> descendants, but couldn't find any... About images with that bottom gap, you could do the following:

我试图找到一些选择器只能获得元素没有如何在悬停但不是图像链接上更改文本链接上的背景颜色后代，但找不到任何...关于具有该底部间隙的图像，您可以执行以下操作：

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

This should get rid of the background showing up behind the image, but may throw off the layout (by not much, though), so be careful.

这应该摆脱图像背后出现的背景，但可能会抛弃布局（虽然不多），所以要小心。

For the transparent images, you should use a class.

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

I really hope that's solved in CSS3, by implementing a parent selector.

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

#2

I'm confused at what you are terming "image links"... is that an 'img' tag inside of an anchor? Or are you setting the image in CSS?

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

If you're setting the image in CSS, then there is no problem here (since you're already able to target it)... so I must assume you mean:

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

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

To which, I would suggest that you specify a background color on the image... So, assuming the container it's in should be white...

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

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

#3

I usually do something like this to remove the gap under images:

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

img {
  display: block;
  float: left;
}

Of course this is not always the ideal solution but it's fine in most situations.

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

#4

This way works way better.

这种方式更好。

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

No cumbersome classes that have to be applied to each image. Detailed description here:

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

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

#5

Untested idea:

未经考验的想法：

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

#6

The following should work (untested):

以下应该工作（未经测试）：

First you

首先你

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

Then you

然后你

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

The second rule will override the first for <a class="imagelink" etc.> and preserve the background color of the parent.

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

I tried to do this without the class="", but I can't find a CSS selector that is the opposite of foo > bar, which styles a bar when it is the child of a foo. You would want to style the foo when it has a child of class bar. You can do that and even fancier things with jQuery, but that may not be desirable as a general technique.

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

#7

you could use display: inline-block but that's not completely crossbrowser. IE6 and lower will have a problem with it.

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

I assume you have whitespaces between <a> and <img>? try removing that like this:

我假设你在和如何在悬停但不是图像链接上更改文本链接上的背景颜色之间有空格？尝试删除这样：

<a><img /></a>

#8

I had this problem today, and used another solution than display: block thanks to the link by asker. This means I am able to retain the link ONLY on the image and not expand it to its container.

我今天遇到了这个问题，并使用了另一个解决方案而不是显示：阻止感谢请求者的链接。这意味着我只能在图像上保留链接，而不能将其扩展到其容器。

Images are inline, so they have space below them for lower part of letters like "y, j, g". This positions the images at baseline, but you can alter it if you have no <a>TEXT HERE</a> like with a logo. However you still need to mask the text line space and its easy if you use a plain color as background (eg in body or div#wrapper).

图像是内联的，因此它们的下方有空格，用于下半部分字母，如“y，j，g”。这会将图像定位在基线上，但如果您没有 TEXT HERE （如徽标），则可以对其进行更改。但是，如果使用普通颜色作为背景（例如在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 */
}

#9

I had the same problem. In my case I am using the image as background. I did the following and it resolved my problem:

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

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

#1