刪除jQuery懸停效果

Question

當鼠標懸停在鏈接上時，會發生效果X 鼠標移開后如何恢復原件？

例如，我嘗試使用javascript修改鏈接行為。 鼠標懸停時鏈接會更改，但是如何恢復更改？

HTML代碼：

<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

使用鼠標懸停的mouseover和mouseout 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）的簡寫為：$（selector）.mouseenter（handlerIn）.mouseleave（handlerOut）;