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

Posted 2023-03-06

【中文标题】css a:link 样式的文字和图片

【英文标题】：css a:link style text and images

【发布时间】：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 的答案标记为解决方案。

【参考方案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;

真的是你所需要的。

【讨论】：

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