jquery - 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/