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

前端之家收集整理的这篇文章主要介绍了css – 如何在悬停但不是图像链接上更改文本链接上的背景颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有这样的CSS规则:
a:hover { background-color: #fff; }

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

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

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

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

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

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

谢谢,

解决方法

我试图找到一些只能得到< a>的选择器.没有< img>的元素后代,但找不到任何……
关于具有底部间隙的图像,您可以执行以下操作:
a img{vertical-align:text-bottom;}

这应该摆脱图像背后出现的背景,但可能会抛弃布局(虽然不多),所以要小心.

对于透明图像,您应该使用类.

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

原文链接:https://www.f2er.com/css/217623.html

猜你在找的CSS相关文章