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

问题描述

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

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

我试图做的是：将元素移入和移出在一起 - 以便用户可以将鼠标移动到无论是元素和只有一旦他们离开BOTH会再次隐藏？

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

解决方案

您可以使用您设置的两个布尔变量，每个布尔变量用于每个元素。它在你输入元素时为真，如果你离开，则为假。

只有当两个元素都是假的时候=>隐藏元素。

  $（document）.ready（function（）{
 var bslider = false; 
 var btest = false; 
 $（'＃slider'）。mouseover（function（）{
 bslider = true; 
 $（'＃slider，#test'）。stop（true，false）.animate（
 {'margin-left'：'20px'
}）; 
}）; 
 $（'＃test'）。 
 $（'＃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'
}）; 
} 
}）; 
}）; 
  

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.

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.

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屋！