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>样式。这种方法有一个警告 - 使用内联图像可能会破坏布局。所以要谨慎使用它。

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 specificity，只要你将图像边框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;
}

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

4 个答案: