[英]Fading when hover over an outside Div
Here is my problem 这是我的问题
I have something like this: 我有这样的事情:
-----------------
| ------ |
| |div1| |
| ------ |
|div2 |
|---------------|
Here I have a div1 in the middle and there is also the outside div2. 在这里我中间有一个div1,外面还有div2。
I also have a transparent background for the whole page layer that turns dark depending on some things. 我还为整个页面图层设置了透明背景,根据某些情况它会变暗。
When I enter div1, I want for the background of the body (including div2) to turn black (except div1). 当我输入div1时,我希望主体的背景(包括div2)变为黑色(div1除外)。 ( I DID THIS)
(我做到了)
When I exit div1, BUT the mouse is still WITHIN DIV2, I want the background to fade out from black. 当我退出div1时,鼠标仍然位于DIV2范围内,我希望背景从黑色逐渐消失。 (THIS WORKS TOO if i don't use the step below).
(如果我不使用下面的步骤,此方法也可行)。
BUT When I exit div2 I want to fully make the background not visible. 但是,当我退出div2时,我想使背景完全不可见。 This means I should interrupt the fade out.
这意味着我应该中断淡出。
My problem is that when I go into div1 (I am using mouseenter), it thinks I am leaving div2. 我的问题是,当我进入div1(我正在使用mouseenter)时,它认为我要离开div2。
This means that I never get to fade out within div2, but go straight to making the background not visible when I exit div1 (instead of fading it out) 这意味着我永远不会在div2中淡出,而是直接退出div1时使背景不可见(而不是淡出背景)。
use an if statement and create your own fade function that calls fade for example. 使用if语句并创建自己的淡入淡出函数,例如,调用淡入淡出。
var ondiv1 = false
var ondiv2 = false
div1.mouseenter(function(){
ondiv1 = true;
})
div1.mouseleave(function(){
ondiv1 = false;
//fadeout function for div2 called
})
div2.mouseenter(function(){
ondiv2 = true;
})
div2.mouseleave(function(){
ondiv2 = false;
if((ondiv2 == false) && (ondiv1 == false)){
//call hide background function
}
})
You could do a simple test to check if the newly hovered element is a child of div2. 您可以做一个简单的测试来检查新悬浮的元素是否是div2的子元素。
div2.mouseleave(function(event) {
// Check if the new mouse target is a child of div2.
if($(event.currentTarget).parents().is(div2))
return;
// Do fade.
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.