jquery - jQuery悬停在项目上并保持活动状态

Question

我不太确定如何最好地表达这个词，但基本上我想将鼠标悬停在一个列表项上，该列表项会淡入它上方的另一个元素。当您将鼠标悬停在列表项上时，元素应该会淡出，但是如果您将鼠标悬停在新可见的元素上，我希望它保持可见。

我整理了一个简单的演示，http://jsfiddle.net/CLDyc/ - 基本上，当您将鼠标悬停在第 1 项上，然后将鼠标移动到“第 1 项额外信息”时，我希望它也保持可见。

var location;

$("#dots li").hover(

    function () {
        location = $(this).attr("class");
        $("#extra-info ."+location).fadeIn("fast");
      },
    function () {
        $("#extra-info ."+location).stop(true, false).fadeOut("fast");
      }
);

Answer 1

由于元素之间存在间隙，mouseleave因此触发事件并且您的元素将被隐藏，一种选择是使用setTimeout函数。

var location, timeout = 0;

$("#dots li").hover(function () {
    location = $(this).attr("class");
    $("#extra-info ." + location).fadeIn("fast");
}, function () {
    timeout = setTimeout(function () {
        $("#extra-info ." + location).stop(true, false).fadeOut("fast");
    }, 500);
});

$('#extra-info li').mouseenter(function(){
   clearTimeout(timeout);   
}).mouseleave(function(){
   $(this).fadeOut('fast');
});

http://jsfiddle.net/SB4pH/

Answer 2

这是实现它的一种方法，类似于 Syon 的建议。

http://jsfiddle.net/CLDyc/2/

HTML

<ul id="dots">
    <li class="item1">Item 1<div style="display:none;">Item 1 Extra Info</div></li>
</ul>

CSS

.item1 div {
    margin: 0;
    padding: 0;
    position:absolute;
    top:8px;
    left:70px;
    width: 100px;
    height: 50px;
    border: 1px solid red;    
}

ul#dots {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul#dots li {
    width: 60px;
    height: 30px;
    border: 1px solid green;
}

JS

$("#dots li").mouseover(function() {
    $(this).find('div').stop(true, false).fadeIn("fast");
}).mouseout(function(){
    $(this).find('div').stop(true, false).fadeOut("fast");
});

$(".item1 div").mouseover(function() {
    $(this).stop(true, false).show();
}).mouseout(function(){
    $(this).stop(true, false).fadeOut("fast");
});