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

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

我在这里设置了一个JSFIDLE-

我想做的是：将元素一起移入和移出，这样用户就可以在任意一个元素之间移动鼠标，只有当他们移开两个元素后，鼠标才会再次隐藏起来

---

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

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

---

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

---

公认的解决方案非常有效。简单一点，举个例子

---

如果你想要一个更抽象的例子。这可以轻松处理两个以上的元素：

可接受的解决方案非常有效。简单一点，举个例子

---

如果你想要一个更抽象的例子。这可以很容易地处理两个以上的元素：

fiddle不再工作只是更新了它-尝试此链接fiddle不再工作只是更新了它-尝试此链接类似的内容，但我目前无法测试它是否真的工作，JSFIDLE对我来说似乎有问题。啊，动画太疯狂了，鼠标丢失了。在制作动画时，加上左侧隐藏的元素，我对动画做了一些修改，以展示它是如何工作的：类似这样的东西，但我目前无法测试它是否真的工作，JSFIDLE对我来说似乎被窃听了。啊，动画太狂野了，鼠标丢失了。在制作动画时，加上元素隐藏在左侧，我对动画做了一些修改，以显示它是如何工作的：