如何重置（撤消）a:hover 属性
Posted
技术标签:
【中文标题】如何重置（撤消）a:hover 属性【英文标题】：How to reset (undo) a:hover property 【发布时间】：2013-12-14 05:03:40 【问题描述】：在下面的 html 中，有三个 <style> 块。第二块是不需要的块，它使鼠标悬停时图像消失。前两个块是不可编辑的。我们必须使用第三块来抵消第二块的影响。给出下面第三个块的示例，但这不起作用。
<!DOCTYPE html>
<html>
<head>
<style>
a
display: inline-block; width: 280px; height: 32px;
background-image: url('http://www.w3schools.com/images/w3logotest2.png');
</style>
<style>
/* some bad guy did this */
a:hover
background-image: none;
</style>
<style>
/* to revert what the bad guy did */
/* but this is NOT work! */
a:hover
background-image: inherit !important;
</style>
</head>
<body>
<a href="http://www.w3schools.com/"></a>
</body>
</html>
非常感谢您的意见。
请注意，（对不起，我说得不够清楚），这只是一个例子。在实际情况下，有很多<a>，第一个块将它们设置为不同的图像。只有一秒钟的街区毁了他们所有人。由于有很多（实际上是无限的，因为它是一个动态页面）<a>，所以不可能一一处理。我希望只有三分之一块，可以恢复邪恶第二块的效果。非常感谢。
【问题讨论】：
诀窍是样式属性的优先级。您应该已经知道有三种类型的 CSS 样式。 (1) 内联 (2) 在标题部分 (3) 外部 CSS 文件.. 优先级是我列出的。因此，如果您在 In Header 部分添加内容，它将覆盖 CSS 文件中的定义。内联样式将覆盖其他所有内容。 【参考方案1】：试试这个：
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style>
a
display: inline-block; width: 280px; height: 32px;
background-image: url('http://www.w3schools.com/images/w3logotest2.png');
</style>
<style>
/* some bad guy did this */
a:hover
background-image: none;
</style>
<style>
/* to revert what the bad guy did */
/* but this is NOT work! */
.toggle-a:hover
background-image: inherit !important;
.toggle-a a
float: left !important;
.bg-hover
background-image: inherit !important;
</style>
</head>
<body>
<div class="toggle-a">
<a class="overwrite" href="http://www.w3schools.com/"></a>
<div>
<script>
$(function()
$('.overwrite').mouseover(function()
$(this).addClass('bg-hover');
).mouseout(function()
$(this).removeClass('bg-hover');
);
);
</script>
</body>
【讨论】：
对不起！你知道第二个街区在哪里吗？ 抱歉，您的代码在我的位置不起作用。我已经找到了第二个街区的位置......有什么帮助吗？谢谢！ 您是否在页面中嵌入了 jquery？我刚刚更新了我的答案，请再试一次。希望能帮到你 我对 jquery 不太熟悉。为什么必须在删除之前添加它？为什么不直接删除它？ 让我们continue this discussion in chat【参考方案2】：我想我现在了解你了。
每个锚点都有不同的背景图片。
有人在悬停时将该网址设置为无。 （而且您显然无权访问标记）
现在您想在悬停时返回该网址。
嗯，很抱歉，但据我所知，您无法在 CSS 中执行此操作。
CSS 在这种情况下没有“撤消”。
见this SO answer。
如果这是唯一的锚元素块，您可以使用 nth-child 来定位第二个。
a:nth-child(2):hover
background-image: url('http://www.w3schools.com/images/w3logotest2.png');
FIDDLE
所讨论的锚元素必须具有 href 值，以便您可以通过属性选择器定位它
a[href="http://your-website"]:hover
background-image: url('http://www.w3schools.com/images/w3logotest2.png');
FIDDLE
如果您将鼠标悬停在上述小提琴中的第二个元素上，您会发现悬停在它上面并不会使其消失。
【讨论】：
谢谢，非常漂亮的插图。但在我的情况下，定位 url 不起作用。请参阅问题中的编辑部分。谢谢！ 该锚点是否有 class 或 id 属性？或者，它的父元素是否有一个类或 id？ 是的，主播有课程。但是每个锚都属于不同的类别。所以在第一个块中，它们被设置为不同的图像。此外，它们的父元素也有一个类。我希望重置所有（无限）锚，而不仅仅是第二个。 @midnite - 我更新了我的答案。我认为你做不到。 哦，是的，感谢您理解我。我正在考虑通过 javascript 删除它？【参考方案3】：这是一个错字：你的风格中有一个额外的，删除它。
a
display: inline-block; width: 280px; height: 32px;
background-image: url('http://www.w3schools.com/images/w3logotest2.png');
应该是这样的：
a
display: inline-block; width: 280px; height: 32px;
background-image: url('http://www.w3schools.com/images/w3logotest2.png');
并且还提供背景图片 url，因为继承只是从之前未定义的父级继承。
【讨论】：
哦，是的！谢谢。但问题仍未解决。【参考方案4】：写：
<style>
a:hover
background-image: url('http://www.w3schools.com/images/w3logotest2.png');
</style>
【讨论】：
哦，是的，感谢您的帮助！但是有很多不同的。不可能把它们都列出来。但是，第二个块可能会破坏所有 只出现一次以上是关于如何重置（撤消）a:hover 属性的主要内容，如果未能解决你的问题，请参考以下文章