jQuery 将鼠标悬停在两个单独的元素上

Question

我有两个单独的元素设置，它们出现在 DOM 的不同部分 - 我面临的问题是它们是绝对定位的，并且我无法将它们包装在容器 div 中。

我在这里设置了一个 JSfiddle - http://jsfiddle.net/sA5C7/1/

我想做的是:将元素移入和移出一起 - 这样用户就可以在任一元素之间移动鼠标，并且只有当它们同时移开时，它才会再次隐藏？

我该如何设置？因为目前，一旦我离开单个元素 - 它就会触发该元素的“离开事件”等。

Answer 1

您可以使用您设置的两个 bool 变量，每个变量对应每个元素。当您输入元素时，它变为 true；如果您离开，则变为 false。

并且只有当两者都为 false 时才离开 => 隐藏元素。

$(document).ready(function(){
    var bslider = false;
    var btest = false;
    $('#slider').mouseover(function() {
        bslider = true;
        $('#slider, #test').stop(true,false).animate(
                    {'margin-left':'20px'
                    });
    });
    $('#test').mouseover(function() {
        btest = true;
        $('#slider, #test').stop(true,false).animate(
                    {'margin-left':'20px'
                    });
    });
    $('#slider').mouseout(function() {
        bslider = false;
        if(!bslider && !btest)
        {
            $('#slider, #test').stop(true,false).animate(
                    {'margin-left':'0'
                    });
        }
    });
    $('#test').mouseout(function() {
        btest = false;
        if(!bslider && !btest)
        {
            $('#slider, #test').stop(true,false).animate(
                    {'margin-left':'0'
                    });
        }
    });
});