Question

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

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

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

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

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/

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

2 个答案: