如何改变背景颜色上悬停文字链接而不是图像链接

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

未经检验的想法：

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

Answer 3

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

首先你

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

然后你

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

第二条规则将覆盖第一个为< a class =“imagelink”等>并保留父级的背景颜色。

我试图这样做没有阶级=“”，但我不能找到一个CSS选择器，是FOO>吧，当它是一个foo的孩子，其风格酒吧的对面。你可能想要设计风格，当它的有是一个阶级吧的孩子。你可以做到这一点，甚至用jQuery做更漂亮的事情，但这可能不是一种常用的技术。

Answer 4

你可以使用display：inline-block，但这并不完全是交叉浏览器。 IE6和更低版本会有问题。

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

<a><img /></a>

Answer 5

我在你terming什么“图像链接”迷茫......是锚的内的“IMG”标签？或者你在CSS中设置图像？

如果您正在设置在CSS的形象，那么就没有问题就在这里（因为你已经能够瞄准吧）......所以我必须假设你的意思是：

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

要哪个，我建议您指定的图像上的背景色...因此，假设它的容器应该是白色的......

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

Answer 6

我平时做这样的事情下，删除图像的差距：

img { 
    display: block; 
    float: left; 
} 

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

Answer 7

我今天遇到了这个问题，并且使用了另一个解决方案，这要归功于由提问者链接的display: block。这意味着我能够在图像上保留链接仅限，并且不会将其展开到其容器中。

图像是内嵌的，所以它们在它们下面有空间用于字母的下半部分，如“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 8

这种方式更好。

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 9

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

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