jquery - 在鼠标悬停事件 jquery 上返回到以前的状态

Question

我有这个小提琴：http: //jsfiddle.net/27bvG/

这个在鼠标悬停时显示“隐藏” li 并保持可见 我对 Jquery 不太熟练，所以我需要一些帮助。如何在鼠标移出时返回先前的状态并再次显示“2 more”？

谢谢大家！

Answer 1

你可以做这样的事情

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

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

在悬停功能中，您可以显示不同的 li，在取消悬停时，您可以再次隐藏它。

Answer 2

您可以通过处理悬停在“另外两个”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);
});