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

【问题标题】：Return to previous status on mouseout event jquery在鼠标悬停事件 jquery 上返回到以前的状态
【发布时间】：2012-10-16 09:47:14
【问题描述】：

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

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

谢谢大家！

【问题讨论】：

标签： jquery html-lists mouseover mouseout

【解决方案1】：

你可以这样做

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

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

在悬停功能中可以显示不同的 li，在 unhover 中可以再次隐藏。

【讨论】：

【解决方案2】：

您可以通过为悬停在“另外 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>

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

【讨论】：