jQueryの/ JavaScriptのマウスは、私はいくつかのトラブル入りマウスでこのメニューを表示/非表示を持っているウィンドウまたは外

であるかどうかを確認します。マウスがHEADERゾーンに近づき、マウスがゾーンを離れるまで表示されるようにしたいと思います。 mouseleave機能がトリガーと（メニュー自体がロックされていなかった場合）、私はより良い説明するjsfiddleを設定jQueryの/ JavaScriptのマウスは、私はいくつかのトラブル入りマウスでこのメニューを表示/非表示を持っているウィンドウまたは外

私のメニューを隠すため、マウスがページを終了すると

問題があります。 http://jsfiddle.net/aZyz8/1/

<html> 
    <header> 
    <nav> 
     <ul> 
     <li><a href="#">Menu Item 1</a></li> 
     <li><a href="#">Menu Item 2</a></li> 
     <li><a href="#">Menu Item 3</a></li> 
     </ul> 
    </nav> 
    </header> 
    <div id="debug"></div> 
</html>

CSS：

html { 
    background: grey; 
    height: 100%; 
    width: 100%; 
} 

header { 
    background: red; 
    height: 200px; 
} 

nav { 
    background: green; 
    width: 100%; 
    height: 50px; 
    position: absolute; 
    top: -50px; 
} 

li { 
    display: inline; 
    margin-left: 20px; 
}

JS：

$('header').mouseenter(function() { 
    $('#debug').text('mouse enters header'); 
    $('nav').animate({ 
    top: '0' 
    }); 
}).mouseleave(function() { 
    $('#debug').text('mouse leaves header'); 
    // if mouse does not leave window 
    $('nav').animate({ 
    top: '-105px' 
    }); 
});

誰もが私はIFということで入れて、 "マウスがページを離れる" トリガするために行う必要がないかについての手掛かりを持っています？私はhover（）、：hoverとmouseover/mouseoutを使ってjQueryとプレーンなJavascriptの両方を試しましたが、html/bodyタグのmouseoutでは動作しないようです。

私はまた、マウスがホバーのhtmlだったが、私は置くと、もちろん「ヘッダ」のhtmlが失われた場合にのみ動作するようにそのコードをカプセル化してみました：とにかく物事を壊すホバー状態を。

おかげ

出典

2012-03-31 Mauro

... – jAndy

ミーどちらも、正確に何がここでの問題ではありませんか？ – Shomz

ページの境界の外側場合に返すイベントオブジェクトのpageXとpageYを確認してください。

http://jsfiddle.net/aZyz8/5/

$('header').mouseenter(function() { 
    $('#debug').text('mouse enters header'); 
    $('nav').animate({ 
     top: '0' 
    }); 
}).mouseleave(function(e) { 
    var pageX = e.pageX || e.clientX; 
    var pageY = e.pageY || e.clientY; 

    if (pageX < 0 || pageY < 0) { // don't execute the rest of this callback 
     return; 
    } 

    $('#debug').text('mouse leaves header'); 
    // if mouse does not leave window 
    $('nav').animate({ 
     top: '-105px' 
    }); 
});

出典

2012-03-31 18:09:27 Trevor

マウスがその領域のどこかに再入場したときに非ヘッダー領域を隠すために、非ヘッダー領域に 'mouseenter'イベントを追加することを忘れないでください。今すぐあなたはそれを再び隠すためにヘッダーに入り、ヘッダーを残す必要があります。 – ThiefMaster

うまく動作します、ありがとう！ – Mauro

'mouseleave'が赤いdivの右側にあるとうまくいかないようです –

あなたはメニューが表示されるようにしたい場合は、ユーザーがウィンドウの外にカーソルを移動しているときは、mouseLeaveイベント上でマウスの座標を確認することができます。

$('header').mouseenter(function() { 
    $('#debug').text('mouse enters header'); 
    $('nav').animate({ 
    top: '0' 
    }); 
}).mouseleave(function(event) { 
    $('#debug').text('mouse leaves header'); 
    // if mouse does not leave window 
    if (event.clientX <= 0 || event.clientY <= 0) 
    { 
    return; 
    } 
    $('nav').animate({ 
    top: '-105px' 
    }); 
});

Hereは一例です。私は問題を得ることはありません

出典

2012-03-31 18:10:00

' event = event || jQueryを使用する場合は不要です。 – ThiefMaster

jQueryの/ JavaScriptのマウスは、私はいくつかのトラブル入りマウスでこのメニューを表示/非表示を持っているウィンドウまたは外

答えて

関連する問題