jquery - jquery - if(thing.is(:hover)) {做某事}

Question

我不能让它工作。在鼠标悬停时，显示一个 div。在鼠标离开时，如果仍然显示元素继续显示该元素，否则淡出该元素。

$('#list_cont').on('mouseenter', '.show_map', function() {
    $(this).next('.map_cont').fadeIn(800);
}).on('mouseleave', '.show_map', function() {
    var mapcont = $(this).next('.map_cont');
    if (mapcont.is(':hover')) {
        mapcont.show();
    } else {
        $(this).next('.map_cont').delay(600).fadeOut(800);
    }
});​

问题是，元素永远不会离开。这里的例子。悬停地图图标。

Answer 1

尝试更多类似的东西。在图标和地图上都使用事件处理程序，仅当鼠标离开两个元素时才会淡出：

$('#list_cont').on('mouseenter', '.show_map', function() {
    $(this).next('.map_cont').stop().fadeIn(800);
}).on('mouseleave', '.show_map', function() {
    if (!$(this).next('.map_cont').is(':hover')) {
        $(this).next('.map_cont').delay(600).stop().fadeOut(800);
    }
});

$('#list_cont').on('mouseenter', '.show_map', function() {
    $(this).stop().show();
}).on('mouseleave', '.map_cont', function() {
    $(this).delay(600).stop().fadeOut(800);
});​

http://jsfiddle.net/JV89J/1/