jQuery hover div debajo de otra capa

Question

¿Es posible ignorar todos los divs que están "por encima" del elemento que se ha enlazado con jQuery? Por ejemplo, tengo un elemento A que tiene un evento hover unido a él, pero también hay otros elementos B, C, D que están "posicionados en forma absoluta" sobre el elemento A. Entonces, cuando el mouse del usuario se mueve al elemento B, C, D, el evento de vuelo estacionario ya no se dispara aunque B, C y D estén directamente sobre el elemento. ¿Es posible ignorar los elementos B C y D?

ACTUALIZACIÓN: Estoy tratando de crear un mapa (elemento A) con los elementos B, C, D como etiquetas de área. Entonces, por ejemplo, para un mapa del estado de Nueva York, tendrá elementos de texto "Manhattan", "Nueva Jersey", etc. superpuestos al mapa. Es por eso que necesito que el vuelo estacionario se dispare incluso si el usuario tiene el mouse sobre las etiquetas.

Answer 1

La única solución que tengo en mente en este momento es crear un elemento invisible en la parte superior y darle el activador de desplazamiento.

Answer 2

La forma en que lo veo, usted tiene algunas opciones:

• hacer como recomienda Ivarska, y crear un elemento vacío sobre todos ellos y el uso que para el gatillo.
• Enlace al mousemove en toda la página y busque cuando está "dentro de la caja" (es decir, sobre el elemento de destino); básicamente, reinvente el evento de desplazamiento. (Pero no esto añade algo de sobrecarga bastante serio a su página)
• Rediseño

También puede ser capaz de unirse a sólo el objetivo (es decir, A) y cualquier elemento que tiene y que pueden superponerse A, a continuación, sólo compruebe si la posición del mouse dentro del otro control hipotéticamente también estaría dentro del control A. Menos gastos generales que el enlace a la página y el control, pero aún más que los típicos.

Answer 3

Si puede usar CSS3, puede configurar pointer-events:none para los elementos absolutamente posicionados, consulte demo here.

All modern browsers admiten esta propiedad, solo IE9 y versiones posteriores y Opera Mini no son compatibles (en el momento de la redacción). También significa que no tendrá ningún evento de puntero para esos elementos que pueden no ser exactamente lo que quiere.

Answer 4

Puede hacer que el índice Z del elemento A sea más alto que el de los elementos B, C y D.

Answer 5

Aunque hay diferentes maneras de solucionar este problema, probablemente la más simple sería añadir el evento vuelo estacionario a todos los elementos:

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

Ejemplo aquí: http://jsfiddle.net/userdude/H5TAG/

Answer 6

Uso e.relatedTarget para determinar si el usuario se movía sobre uno de ustedes elementos anidados (absolutos).Tal vez más fácil si se le da su mapa de etiquetas de una clase

por ejemplo: Para mostrar etiquetas durante un estado estacionario en el mapa, y sólo ocultarlos cuando el usuario abandona el mapa

$("#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

El ajuste del índice Z alguien más mencionó trabajos. Haga que el índice Z sea más alto para el elemento que desea que se reconozca mediante el control deslizante.