如何更改悬停而不是图片链接上文字链接的背景颜色 [英] How to change background-color on text links on hover but not image links

问题描述

我有一个像这样的CSS规则：

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

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

我以前曾经困扰过这个问题，但我总是解决它使用快速肮脏的方法为图像链接分配类：

  a.imagelink：hover {background-color：transparent; }今天我在寻找一个更优雅的解决方案来解决这个问题，当我偶然发现了    https://developer.mozilla.org/en/Images%2c_Tables%2c_and_Mysterious_Gaps =nofollow noreferrer> this 。
 
 
 
基本上是什么建议使用 display：block ，这真的解决了非透明图像的问题。但是，它导致另一个问题：现在的链接与段落一样宽，虽然图像不是。
 
 
 
有一个很好的方法来解决这个问题， 
 
 
 
谢谢，
解决方案
 p>我试图找到一些选择器，只有< a> 元素没有< img> 后代，但找不到任何... 
关于具有底部差距的图像，您可以执行以下操作：
  a img {vertical-align：text-bottom;} 
  
 
 
 
 
对于透明图片，你应该使用一个类。
 
 
 
我真的希望通过实现父选择器在CSS3中解决。
 
I have a CSS rule like this:
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.

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

Thanks,
解决方案
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.

                        
这篇关于如何更改悬停而不是图片链接上文字链接的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！