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

Question

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

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

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

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

Answer 1

您可以使用您设置的两个布尔变量，每个变量对应每个元素。当您输入元素时，它变为 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'
                    });
        }
    });
});

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/