0

アニメーション化された div をオーバーレイするメニューがあります。div は、ホバー時に不透明度をアニメーション化します。問題は、メニューが div に z-index されているため、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 の 2 番目のホバー イベントは、最初のホバー イベントの前に一貫して実行されていました。どうしてか分かりません。if ステートメントの前の 2 番目のホバー イベントに setTimeout を追加したところ、魅力的に機能しました。

DOM 構造、Jquery の順序、または私が考えることができる他のものに関係なく、2 番目のホバー イベントが最初にトリガーされ続ける理由を誰かが提案できる場合は、興味があります。それ以外の場合は、これを「WTF」の下にファイルし、次回のために覚えておきます.

すべての入力に感謝します!

4

1 に答える 1

0

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が少しファンキーに見える場合は、これを読んでください。また、これがうまくいくとは100%確信が持てません。

于 2012-12-06T03:06:49.773 に答える