jQuery 悬停在两个单独的元素上 [英] jQuery Hover on Two Separate Elements

问题描述

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

I have two separate elements setup which appear on different parts of the DOM - the problem I am facing is that they are absolutely positioned and I can't wrap them in a container div.

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

I have setup a JSfiddle here - http://jsfiddle.net/sA5C7/1/

我想要做的是:将元素移入和移出一起 - 这样用户就可以在任一元素之间移动鼠标，并且只有在移开两个元素后才会再次隐藏?

What I am trying to do is: move the elements in and out together - so that a user can move their mouse between either element and ONLY once they move off BOTH would it hide again ?

我该如何设置?因为目前，一旦我离开单个元素 - 它会触发该元素的离开事件"等.

How can I set this up? Because at the moment, once I move off a single element - it fires the "leave event" for that element etc.

推荐答案

您可以使用您设置的两个布尔变量，每个变量用于每个元素.进入元素时为真，离开时为假.

You could use two boolean variables that you set, each for every element. It gets true when you enter the element and false if you leave.

只有当两者都为 false 时才离开 => 隐藏元素.

And only when both are false on leaving => hide the elements.

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

这篇关于jQuery 悬停在两个单独的元素上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！