Question

我是jQuery中的菜鸟，我想了解当鼠标离开另一个元素时，如何知道我的鼠标悬停在一个元素中。

我写这段代码：

HTML

<ul>
    <li class="conver">1</li>
    <li class="conver">2</li>
    <li class="conver">3</li>
    <li class="conver">4</li>
    <li class="conver">5</li>
</ul>
<div id="center">JSFIDDLE</div>

jquery的

$('ul').on('mouseenter','li', function () {
        $('#center').fadeIn('fast');

}).on('mouseleave','li', function () {
     //I want when mouse leave this element if mouse doesn't hover on ('#center') 
     //element so hide ('#center') element but if to be hover on it this div keep on
     //and don't hide
        $('#center').stop().fadeOut('fast');
});

现在告诉我，当鼠标离开li元素（'#center'）元素或不 !!! <时，我怎么知道/ p>

Answer 1

试试这个

timerId = null;
$('ul').on('mouseenter','li', function () {
        $('#center').fadeIn('fast');

}).on('mouseleave','li', function () {
     //I want when mouse leave this element if mouse doesn't hover on ('#center') 
     //element so hide ('#center') element but if to be hover on it this div keep on
     //and don't hide
     timerId = setTimeout(function(){
                     $('#center').stop().fadeOut('fast');
               }, 500);

});

$('#center').on('mouseenter', function(){
     if(timerId){
        cleatTimeout(timerId);
        timerId = null;
     }
});

Answer 2

我认为这会奏效。请记住，缓存jquery选定对象是一种很好的做法。例如，代码中多次使用$（'＃center'）。

var center = $('#center');
var ul = $('ul');
var isMouseOnCenter = false;
ul.on("mouseenter", function () {
    center.stop().fadeIn('fast');
}).on("mouseleave", function() {
    isMouseOnCenter = false;
    setTimeout(function() {
        if(!isMouseOnCenter)
            center.stop().fadeOut('fast');
    }, 300);    
});
center.on("mouseenter", function() {
    isMouseOnCenter = true;
});

以下是http://jsfiddle.net/krasimir/cWn65/1/

上面代码的js小提琴

还有一点小问题，因为您在 li 标记上附加了该事件。在 ul 上不是更好。

如何在一个元素中检查悬停鼠标

2 个答案: