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 img {
    display: block;
    }

这将重置 样式。此方法有一个警告 - 将其与内联图像一起使用可能会破坏布局。所以要谨慎使用。

Answer 2

怎么样

a[href$=jpg]:hover, 
a[href$=jpeg]:hover, 
a[href$=png]:hover, 
a[href$=gif]:hover {
        text-decoration: none;
        border: 0;
        border: none;
        }

Answer 3

根据 css 特异性，只要您将图像边框 css 放在其他CSS。

顺便说一句，没有必要将 p 和 td 像这样分开。

#main a {
    color:#7b9a04;
    text-decoration:none;
}

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

确实是您所需要的。

Answer 4

在悬停声明之后显式定义图像无边框怎么样？

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

img {
  border: none;
}