css a:链接样式文本和图像

Question

我有一个快速的CSS问题,这些问题让我烦恼,我现在似乎无法弄明白.

我已经设置了我的页面上的链接在悬停时有一个底部边框,但它的底部边框出现在有链接的图像上,我无法弄清楚如何防止边框出现在图像上.

这是我现在拥有的.

#main a:hover {
    border-bottom:solid 1px #7b9a04;
    color:#333;
}

img, img a:hover {
    border-bottom:none;
}

然而,这似乎不起作用.我认为它没有任何其他样式覆盖它,因为如果我删除#main a:hover样式,图像不再具有底部边框,但网站上的其他任何链接都不会.

Answer 1

问题在于链接元素<a>,而不是图像链接本身.为悬停状态指定底部边框时<a>,它也适用于包含图像的链接.因此,当您将鼠标悬停在这样的链接(包含图像)上时,它就是显示边框底部的链接.不是图像.

虽然有一个解决方案.尝试申请:

a img {
    display: block;
    }

这将重置<a>样式.这种方法有一个警告 - 使用内联图像可能会破坏布局.所以谨慎使用它.