Question

在下面的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>，因此无法逐一处理它们。我希望只有三分之一的块，可以恢复邪恶的第二块的效果。非常感谢。

Answer 1

写：

<style>
    a:hover {
        background-image: url('http://www.w3schools.com/images/w3logotest2.png'); 
    } 
</style>

Answer 2

这是一个错字：你的风格中还有一个}，删除它。

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');
}

并且还提供了背景图像网址，因为继承只是继承了之前未定义的父级。

Answer 3

我想我现在了解你。

每个锚点都有不同的背景图像。

有些人在悬停时将该网址设置为无。（而且你显然无法访问标记）

现在你想在悬停时返回该网址。

对不起，但据我所知，你不能在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

如果将鼠标悬停在上述小提琴中的第二个元素上，您会看到将鼠标悬停在其上方并不会使其消失。

Answer 4

试试这个：

<!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>

如何重置（撤消）a：悬停属性

4 个答案: