CSS 如何更改悬停时文本链接的背景颜色而不是图像链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/273964/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change background-color on text links on hover but not image links
提问by Can Berk Güder
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,
谢谢，
采纳答案by Gabe
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>后代的元素，但找不到任何...关于具有底部间隙的图像，您可以执行以下操作：
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 中解决。
回答by Massimiliano Torromeo
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.
当然，这并不总是理想的解决方案，但在大多数情况下都可以。
回答by Paulish
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/
http://perishablepress.com/press/2008/10/14/css-remove-link-underlines-borders-linked-images/
回答by Timothy Khouri
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 shouldbe white...
为此，我建议您在图像上指定背景颜色...因此，假设它所在的容器应该是白色...
a:hover { background: SomeColor }
a:hover img { background-color: #fff; }
回答by FlySwat
Untested idea:
未经测试的想法：
a:hover {background-color: #fff;}
img:hover { background-color: transparent;}
回答by Peter Rowell
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.
第二个规则将覆盖 <a class="imagelink" etc.> 的第一个规则并保留父级的背景颜色。
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 hasa 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有一个类 bar 的孩子时，你会想要设置它的样式。您可以使用 jQuery 做到这一点，甚至可以做更高级的事情，但作为通用技术，这可能并不理想。
回答by jishi
you could use display: inline-block but that's not completely crossbrowser. IE6 and lower will have a problem with it.
您可以使用 display: inline-block 但这不是完全跨浏览器。IE6 及更低版本会有问题。
I assume you have whitespaces between <a>and <img>? try removing that like this:
我假设您在<a>和之间有空格<img>？尝试像这样删除它：
<a><img /></a>
<a><img /></a>
回答by Balu
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");
回答by Kim
I had this problem today, and used another solution than display: blockthanks to the link by asker. This means I am able to retain the link ONLYon the image and not expand it to its container.
我今天遇到了这个问题，并使用了另一种解决方案，而不是display: block感谢提问者的链接。这意味着我只能在图像上保留链接，而不能将其扩展到其容器。
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 bodyor div#wrapper).
图像是内联的，因此它们下方有空间用于字母的下部，例如“y，j，g”。这baseline会将图像定位在，但如果您不<a>TEXT HERE</a>喜欢徽标，则可以更改它。但是，如果您使用纯色作为背景（例如 inbody或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 */
}
