返回到上mouseout事件的jQuery

Question

以前的状态我有这个小提琴：http://jsfiddle.net/27bvG/

这个节目“潜伏”里的鼠标悬停和保持可见 我不那么熟练使用jQuery，所以我需要一些帮助。 如何在mouseout上返回到以前的状态并再次显示“2 more”？

谢谢大家！

Answer 1

你可以做这样的事情

 $("#tricky_list li.more").hover(
     function() { 
      // hover function  
     } 

    }, 
     function() { 
     // unhover function 
     } 
    ); 

在你能展现不同的Li和​​在unhover可以再次隐藏悬停功能

。

Answer 2

您可以通过处理在“2 more”LI上悬停显示的LI的mouseover和mouseout事件来完成此操作。见下面的代码。

检查这个演示：http://jsfiddle.net/27bvG/8/

HTML

<ul id="tricky_list"> 
<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> 
<li class="onmore">Item 4</li> 
<li class="onmore">Item 5</li> 
</ul> 

JS

var hideTimer = -1; 
$("#tricky_list li.more").on("mouseover", function(){ 
    $("#tricky_list li.onmore").show(); 
    $("#tricky_list li.more").hide() 
}); 
$("#tricky_list li.onmore").on("mouseover", function(){ 
    clearTimeout(hideTimer); 
    hideTimer = -1; 
}); 
$("#tricky_list li.onmore").on("mouseout", function(){ 
    hideTimer = setTimeout(function() { 
     $("#tricky_list li.more").show(); 
     $("#tricky_list li.onmore").hide(); 
     hideTimer = -1; 
    }, 1000); 
});