CSS :link style text and images

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>造型。这种方法有一个警告——将其用于内联图像可能会破坏布局。所以请谨慎使用。