停止悬停悬停事件

问题描述：

我有一个覆盖动画div的菜单。悬停的div动画不透明。问题是，在菜单z-indexed div上，li正在中断div的悬停，导致mouseleave事件并触发div到不透明状态：1。我已经为菜单li编写了一个中断，如下所示，但没有效果。停止悬停悬停事件

var ovver=false; 
$("#nav li").hover(function() { 
    ovver=true; 
}, function() { 
    ovver=false; 
}); 
$('#hero div').hover(function() { 
    if (!ovver) { 
     $('#hero div').stop().animate({'opacity':0},{duration:650, easing:'easeInOutSine'}); 
    } 
}, function() { 
    if (!ovver) { 
     $('#hero div').stop().animate({'opacity':1},{duration:650, easing:'easeInOutSine'}); 
    } 
});

我不知道为什么变量不是工作，而是盘旋在李的还是触发的不透明度：1级的动画。我究竟做错了什么？？！！！

编辑：已解决。出于某种原因，#hero div上的第二个悬停事件在第一个悬停事件之前一直执行。我不知道为什么。我在if语句前的第二个悬停事件中添加了一个setTimeout，它的功能就像一个魅力。

如果有人可以建议为什么第二个悬停事件首先触发，无论DOM结构，JQuery订单或其他任何我能想到的，我都会感兴趣。否则，我将在“WTF”下提交此文件，并在下次记住它。

感谢您的所有意见！

可能是mouseenter？ – dmi3y

答

我发现CSS“！important”实际上会覆盖JQuery的东西，即使是内联添加。

<style type='text/css'> 
#hero div:hover{ 
    opacity: 0 !important; 
} 
</style>

在回应肖恩·墨菲

也许不起眼的jQuery和CSS魔法可以做的伎俩第一有何评论？

$('#hero div').hover(function(){ 
    $('#nav li').css("cssText","opacity: 0; !important;"); 
});

如果cssText看起来有点时髦给你，read this。另外，我不是100％肯定这会起作用。

哎呀，不是这个问题：动画玩的很好;不幸的是，即使菜单按钮被隐藏起来，它也会播放。这就是我想要解决的问题：为什么上述内容不能保持悬停动画不被播放，当李的被淹没。我以为我在CSS中留下了一个pointer-events：none，但事实并非如此。对不起，男人，但不错的尝试！ –

更新我的答案，如果你仍然感兴趣 –

感谢您让我知道cssText ...没有意识到这一点。不幸的是，也没有工作。我想这是因为悬停eventHandler的双重事件，虽然我看到jsFiddles在线，似乎没有这个问题。我目前正在试验另一条涉及stopImmediatePropogation的路线。会让你知道。 –

停止悬停悬停事件

相关推荐