Question

在我的网站上，我有一个超链接的全局CSS规则：

a {
    color: #1F497D;
    text-decoration: none;
}

a:hover {
    color: #FFFFFF;
    background-color: #1F497D;
}

这适用于纯文字超链接 - 链接会在悬停时获得应用于它的背景颜色。

<a href="contact.html">Contact Us</a>

但是这会导致其他链接类型出现问题，例如：

<a href="image.png">
    <img src="thumb.png" alt="" />
</a>

在上面的示例中，图像是透明的PNG，因此可以在悬停时看到a:hover规则应用的背景颜色。

我们有什么方法可以调整全局CSS规则，使其仅适用于文本链接？我知道我可以为这些链接添加一个单独的类，但因为有这么多我更喜欢一个更简单的解决方案。

Answer 1

您可以创建一个类来锚定不是文本的标记：

a.not-a-text:hover {
 background-color: transparent;
}

他们在HTML中：

<a class="not-a-text" href="image.png">
    <img src="thumb.png" alt="" />
</a>

Answer 2

由于您要求“更简单”的解决方案（而不是添加类），您可以使用属性选择器应用样式（其中a个元素具有以{{结尾的href属性1}}扩展）拥有png背景。

这样的事情：

transparent

这是一个小提琴（有一个a[href$=".png"]:hover{ background-color: transparent; }悬停，您可以设置为red）：

http://jsfiddle.net/sb6xvztm/

Answer 3

您应该在链接上使用CSS类而不是标签，因为它会使维护更容易。

.text-link {
    color: #1f497d;
    text-decoration: none;
}

.text-link:hover {
    color: #FFFFFF;
    background-color: #1F497D;
}

<a class="text-link" href="contact.html">Contact</a>
<a class="img-link"><img src="someimage.jpg" alt="alt"></a>

Answer 4

如果您不反对运行jQuery的网站，我建议使用这个简单的解决方案：

jQuery('a').hover(function(){
    jQuery(this).has('img').css('background', 'none');
});

此处的工作示例http://jsfiddle.net/a9h9wbnv/

Answer 5

我肯定会使用新课程。然后，只需使用任何像样的文本编辑器（如Notepad ++）来查找和替换：

发现：<a href="*"> <img

REPLACE：<a class="image-link" href="*"> <img

在你的CSS中：

a.image-link:hover {
 background-color: transparent;
}

Answer 6

所以你只希望文本超链接有悬停？

If so, you can simply give the the 'Contact Us' a different class name or a specific ID. 

<a href="image.png">
    <img src="thumb.png" alt="" />
</a>

<a id = "contact" href="contact.html">Contact Us</a>


a {
    color: #1F497D;
    text-decoration: none;
}

#contact:hover {
    color: #FFFFFF;
    background-color: #1F497D;
}

仅用于文本的CSS超链接样式链接

6 个答案: