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

我有这样的CSS规则:

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

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

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

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

今天,当我偶然发现这个时,我正在寻找一个更优雅的解决方案.

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

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

谢谢,

我试图找到一些选择器,它只能获得没有后代的元素,但找不到任何...关于具有底部间隙的图像,您可以执行以下操作:

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