Question

当鼠标悬停在链接上时，假设发生效果X。如何在鼠标移开后恢复原件？

例如，我尝试使用javascript修改链接行为。鼠标悬停时链接会发生变化，但如何还原更改？

HTML code：

<ul id="nav">
    <li id="a1"><a href="#">original link 1</a></li>
    <li id="a2"><a href="#">hover link 1</a></li>
    <li id="b1"><a href="#">original link 1</a></li>
    <li id="b2"><a href="#">hover link 1</a></li>
    <li id="c1"><a href="#">original link 1</a></li>
    <li id="c2"><a href="#">hover link 1</a></li>
</ul>

Javascript代码：

$("#nav a li").hover(function () {
     $('#' +this.id.charAt(0)+"1").hide();
});

Answer 1

在更正HTML标记后使用CSS代替。这将为您提供更好的性能，更少的代码，并且更“适当”，因为视觉细节应留给CSS。

#nav li:hover {
  display: none;
}

更新：在尝试进一步了解您的标记后，我会更好地了解您要做的事情。您似乎想要隐藏下一个<li>元素。在这种情况下，请使用CSS邻接选择器：

#nav li:hover + li {
  display: none;
}

Answer 2

尝试

 $("#nav a li").on('hover', function () {
   //mousehover
 } , function(){
   //mouseout
 } );

Answer 3

使用鼠标悬停和鼠标移除jQuery而不是悬停

Answer 4

您编写的代码等同于$(selector).on("mouseenter mouseleave", handlerInOut);

使用有效标记......

<ul id="nav">
    <li><a href="#">hover link 1</a></li>
    <li><a href="#">hover link 2</a></li>
</ul>

JQuery的

$("#nav a li").hover(function () {
     $('#' +this.id.charAt(0)+"1").hide();
 }, function() {
     $('#' +this.id.charAt(0)+"1").show();
});

来自jQuery API文档：http://api.jquery.com/hover/

调用$（selector）.hover（handlerIn，handlerOut）是以下的简写： $（选择器）.mouseenter（handlerIn）.mouseleave（handlerOut）;

删除jQuery悬停效果

4 个答案: