Question

我有一个覆盖动画div的菜单。 div在悬停时动画显示不透明度。问题是，当菜单z-index在div上时，li正在中断div hover，导致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上仍会触发不透明度：1动画。我做错了什么？!!!

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

如果有人能够提出为什么第二个悬停事件在第一次触发时仍然存在，无论是DOM结构，Jquery命令还是其他任何我能想到的事情，我都会感兴趣。否则，我将在“WTF”下提交此文件，并在下次记住这一点。

感谢您的所有输入！

Answer 1

我发现CSS“！important”实际上会覆盖JQuery的内容，即使对于内联添加也是如此。

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

回应Sean Murphy的第一条评论

也许晦涩难懂的jQuery和CSS魔法可以解决这个问题吗？

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

如果cssText看起来有点时髦，read this。此外，我不是百分百肯定这会起作用。

悬停时停止悬停事件

1 个答案: