停止懸停懸停事件

我有一個覆蓋動畫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」下提交此文件，並在下次記住它。

感謝您的所有意見！

來源

2012-12-06 Sean Murphy

可能是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％肯定這會起作用。

來源

2012-12-06 03:06:49

哎呀，不是這個問題：動畫玩的很好;不幸的是，即使菜單按鈕被隱藏起來，它也會播放。這就是我想要解決的問題：爲什麼上述內容不能保持懸停動畫不被播放，當李的被淹沒。我以爲我在CSS中留下了一個pointer-events：none，但事實並非如此。對不起，男人，但不錯的嘗試！ –

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

感謝您讓我知道cssText ...沒有意識到這一點。不幸的是，也沒有工作。我想這是因爲懸停eventHandler的雙重事件，雖然我看到jsFiddles在線，似乎沒有這個問題。我目前正在試驗另一條涉及stopImmediatePropogation的路線。會讓你知道。 –

停止懸停懸停事件

回答

相關問題