css a:link 样式的文字和图片答案

【问题标题】：css a:link style text and imagescss a:link 样式的文字和图片
【发布时间】：2011-04-15 11:35:00
【问题描述】：

我有一个快速的 CSS 问题困扰着我，我现在似乎无法弄清楚。

我已将页面上的链接设置为在悬停时有一个底部边框，但底部边框出现在具有链接的图像上，我不知道如何防止边框出现图片。

这是我目前拥有的。

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

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

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

【问题讨论】：

好吧，img a:hover 肯定不行，因为img 标签不能有后代。
a img:hover 或 a:hover img 更好:) 无论如何，链接上的border-bottom...不是text-decoration:underline，你知道...链接的默认样式.
我更喜欢使用border-bottom，因为它为您提供了比text-decoration:underline更多的选择。使用边框，您可以调整粗细，使其颜色与文本完全不同。
如果你回到这个，我认为你应该将 immysl 的答案标记为解决方案。

标签： css image hover border

【解决方案1】：

怎么样

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

【讨论】：

【解决方案2】：

问题在于链接元素<a>，而不是图片链接本身。当您为<a> 的悬停状态指定下边框时，它也适用于包含图像的链接。因此，当您将鼠标悬停在此类链接（包含图像）上时，它是显示边框底部的链接。不是图片。

不过有一个解决方法。尝试申请：

a img {
    display: block;
    }

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

【讨论】：

这对我有用。正如您所提到的，我认为这里的其他答案没有意识到问题出在链接上，而不是图像上。
这似乎是一个非常糟糕的解决方法，因为它会强制所有带有链接的图像默认被阻止，对吗？更好的选择是将特定类放在链接图像的元素上并以这种方式定位它吗？

【解决方案3】：

如何在悬停声明之后明确定义图像没有边框？

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

img {
  border: none;
}

【讨论】：

似乎没有帮助。我对此一无所知。
@Adam：你能分享一个链接到你的页面还是分享你的 html/css，有可能其他东西会覆盖它
我认为这不起作用，因为边框应用于链接，而不是图像。

【解决方案4】：

根据css specificity，只要您将图像边框 css 放在其他 css 之后，它就应该可以工作。

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

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

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

真的是你所需要的。

【讨论】：

感谢您的提示。我仍然遇到问题，并且图像边框确实出现在其他链接样式之后。也许它是某种缓存问题。我明天早上在另一台机器上试试。