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

Question

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

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

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

我怎么设置它？因为此刻，一旦我离开单个元素 - 它会触发该元素的“离开事件”等。

Answer 1

您可以使用您设置的两个布尔变量，每个变量用于每个元素。输入元素时会生效，离开时会生效。

并且只有在离开时两者都是假的时候=>隐藏元素。

$(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'
                    });
        }
    });
});

Answer 2

接受的解决方案很有效。简化一下并举例说明。

https://jsfiddle.net/ngb1q3kp/2/

$(function(){
    var sliderHover = false;
    var testHover = false;
    $("#slider").hover(function() {
        sliderHover = true;
        doHover();
    }, function() {
        sliderHover = false;
        checkHide();
    });
    $("#test").hover(function() {
        testHover = true;
        doHover();
    }, function() {
        testHover = false;
        checkHide();
    });
    function doHover() {
        $('#slider, #test').stop(true,false).animate({'margin-left':'285px'});
    }
    function checkHide() {
        if (!sliderHover && !testHover) {
            $('#slider, #test').stop(true,false).animate({'margin-left':'0'});
        }
    }
});

如果你想要一个更抽象的例子。这可以轻松处理两个以上的元素：https://jsfiddle.net/q6o2v8fz/