jQuery / Javascript controlla se il mouse è dentro o fuori la finestra

Ho qualche problema a mostrare / hide questo menu al passaggio del mouse. Mi piacerebbe che il menu mostri quando il mouse si avvicina alla zona HEADER e resta attivo finché il mouse non lascia la zona.

Il problema si verifica quando il mouse esce dalla pagina perché la funzione mouseleave triggers e nasconde il mio menu (se il menu stesso non era bloccato)

Ho impostato un jsfiddle per spiegare meglio. http://jsfiddle.net/aZyz8/1/

 

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' }); });​ 

Qualcuno ha idea di cosa devo fare per triggersre la “pagina delle foglie del mouse” per inserire quell’IF? Ho provato quasi tutto il jQuery e il lato Javascript semplice, usando hover (),: hover e mouseover / mouseout ma sembra che non funzioni su mouseout con tag html / body.

Ho anche provato a incapsulare quel codice per funzionare solo se il mouse era hover hover, ma ovviamente quando hover “header” html perde: lo status di hover infrange comunque le cose.

Grazie

Controllare la pagina X e la pagina Y dell’object evento per restituire se al di fuori dei limiti della pagina.

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' }); });​ 

Se vuoi che il menu sia visibile mentre l’utente sposta il cursore fuori dalla finestra, puoi controllare le coordinate del mouse sull’evento di 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' }); });​ 

Ecco un esempio.