jQuery hover div sotto un altro livello

Question

È possibile ignorare tutti i div che "sopra" l'elemento che si è tenuto al passaggio del mouse su di essi con jQuery? Ad esempio, ho un elemento A che ha un evento hover associato ad esso, ma ci sono anche altri elementi B, C, D che sono "posizionati in modo assoluto" sopra l'elemento A. Quindi quando il mouse dell'utente si sposta sull'elemento B, C, D, l'evento hover non viene più attivato anche se B, C e D sono direttamente sopra l'elemento. È possibile ignorare gli elementi B C e D?

UPDATE: In realtà sto cercando di creare una mappa (elemento A) con elementi di B, C, D come etichette della zona. Ad esempio, per una mappa dello stato di New York, si avranno elementi di testo "Manhattan", "New Jersey", ecc. Che si sovrappongono alla mappa. Questo è il motivo per cui ho bisogno che l'hover si attivi anche se l'utente ha il mouse sulle etichette.

Answer 1

L'unica soluzione che ho in mente in questo momento è quella di creare un elemento invisibile in alto e dargli il grilletto al passaggio del mouse.

Answer 2

Il mio modo di vedere, avete alcune opzioni:

• Fare come raccomandato Ivarska, e creare un elemento vuoto su tutti loro e l'uso che per il trigger.
• Lega al mousemove sull'intera pagina e trova quando è "dentro la scatola" (cioè sopra l'elemento di destinazione) - in pratica, reinventa l'evento di passaggio del mouse. (Ma non questa aggiunge alcune piuttosto grave in testa alla pagina)
• Redesign

Si può essere anche in grado di legarsi al proprio target (cioè A) e tutti gli elementi che hai, che potrebbero sovrapporsi A, poi basta controlla se la posizione del mouse all'interno dell'altro controllo sarebbe ipoteticamente anche all'interno del controllo A. Meno spese generali del binding alla pagina e del controllo, ma ancora più che tipiche.

Answer 3

Se è possibile utilizzare CSS3, è possibile impostare pointer-events:none per gli elementi posizionati in modo assoluto, vedere demo here.

All modern browsers supporta questa proprietà - solo IE9 e versioni successive e Opera Mini non supportano (al momento della scrittura). Significa anche che non si avranno eventi puntatore per quegli elementi che potrebbero non essere esattamente ciò che si desidera.

Answer 4

Si potrebbe rendere l'indice z dell'elemento A più alto di quello degli elementi B, C e D.

Answer 5

Anche se ci sono diversi modi per risolvere questo, probabilmente il più semplice sarebbe quella di aggiungere l'evento hover per tutti gli elementi:

HTML

<div id="a" class="hover"></div> 
<div id="b" class="hover"></div> 
<div id="c" class="hover"></div> 
<div id="d" class="hover"></div> 
<div id="state">unhovered</div> 

CSS

#a { 
    width: 350px; 
    height: 300px; 
    border: 1px solid #000; 
    background-color: #ccc; 
} 
#b { 
    position: absolute; 
    top: 35px; 
    left: 35px; 
    width: 35px; 
    height: 30px; 
    border: 1px solid #000; 
    background-color: #cca; 
} 
#c { 
    position: absolute; 
    top: 85px; 
    left: 85px; 
    width: 35px; 
    height: 30px; 
    border: 1px solid #000; 
    background-color: #cca; 
} 
#d { 
    position: absolute; 
    top: 85px; 
    left: 135px; 
    width: 35px; 
    height: 30px; 
    border: 1px solid #000; 
    background-color: #cca; 
} 

jQuery

$(document).ready(function(){ 
    $('.hover').hover(
     function(){ 
      $('#state').text('hovered'); 
     }, 
     function(){ 
      $('#state').text('unhovered'); 
     } 
    ); 
}); 

Esempio qui: http://jsfiddle.net/userdude/H5TAG/

Answer 6

Usa e.relatedTarget per determinare se l'utente passa sopra uno di voi elementi annidati (assoluti).Forse più facile se si dà il mappa etichette una classe

ad esempio: per mostrare le etichette durante lo stato hover sulla mappa, e solo nasconderli quando l'utente lascia la mappa

$("#map").hover(
     function(e) { 
     $(this).find(".labels").fadeIn(); 
     }, 

     function(e) { 
     if($(e.relatedTarget).hasClass("maplabel")) { 
      //The user has hovered over a label...Do nothing (or some other function) 
     } else { 
      // User has left the map and isn't over a label 
      $(this).find(".labels").fadeOut(); 
     } 
    ); 

Answer 7

La regolazione z-index qualcun altro ha menzionato opere. Rendi lo z-index più alto per l'oggetto che desideri venga riconosciuto al passaggio del mouse.