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

jQuery将鼠标悬停在item上并保持活动状态

2 个答案: