悬停时停止悬停事件

Question

我有一个覆盖动画 div 的菜单。 div 在悬停时动画不透明度。问题是，菜单 z-indexed 在 div 上，li 正在中断 div 悬停，导致 mouseleave 事件并将 div 触发为 opacity: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'});
    }
});

我不确定变量为什么不起作用，但是将鼠标悬停在 li 上仍然会触发 opacity:1 动画。我做错了什么？？！！！

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

如果有人能建议为什么第二个悬停事件会持续触发，无论 DOM 结构、Jquery 顺序还是我能想到的其他任何东西，我都会感兴趣。否则，我将在“WTF”下归档，并记住它以备下次使用。

感谢大家的意见！

Answer 1

我发现 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% 确定这会奏效。