CSS - Pase el mouse a través de los elementos para activar el elemento sobre cubierto

Question

Tengo un diseño de página que implica una gran cantidad de posición absoluta e indexación z, por lo que hay muchos elementos que se superponen entre sí.

Uno de los elementos solo contiene texto y se cierne sobre un montón de otras cosas.

Debajo de ese elemento hay varios elementos que tienen aplicadas las clases de CSS Hover.

Cuando el mouse pasa sobre el elemento que contiene el texto, me gustaría que de alguna manera el elemento de abajo responda a la presencia del mouse y active los estilos de pseudo clase.

¿Hay alguna manera de diseñar un elemento para que el elemento estacionario pase a través de él a cualquier elemento que se encuentre debajo?

Esto no sería demasiado difícil con JavaScript, pero preferiría no seguir ese camino en este momento para mantener las cosas tan simples como puedan. Estaré complicando las cosas con JavaScript lo suficiente más tarde.

Gracias

P.S. - Ya estoy usando HTML5 y CSS3, así que no tendría problemas con las soluciones que utilizan estos estándares más nuevos.

Answer 1

puede utilizar pointer-events: none; al elemento en la parte superior:

ver http://jsfiddle.net/7aeDt/

como se puede ver, cuando se pasa el elemento en la parte superior del elemento se activa atrás. Para obtener más información sobre esta propiedad: https://developer.mozilla.org/en/CSS/pointer-events

ejemplo:

<div> on top of all: hover me </div> 
<div>1</div> 
<div>2</div> 
<div>3</div> 
<div>4</div> 

css

div { 
    width : 200px; 
    height : 200px; 
    float : left; 
    cursor : pointer; 
    border : 1px green solid; 
} 

div + div:hover { background: #a1a6c8; } 

div:first-child { 
    pointer-events : none; 
    position  : absolute; 
    top   : 100px; 
    left   : 100px; 
    border   : 1px green solid; 
    background  : #c1c6c8; 
} 

Answer 2

También, algo que las personas pueden encontrar útil es que se puede volver a habilitar los eventos de puntero en niños elementos del elemento pointer-events: none al configurarlos en pointer-events: auto explicitly. Esto no parece estar bien documentado y resulta muy útil. - slicedtoad

El comentario de @shoededtoad fue muy útil para mí, así que creo que merece una respuesta completa. Si configura pointer-events: none a uno de los padres, deshabilitará los eventos para sus hijos. SIN EMBARGO, si establece point-events: auto en los niños, estos funcionarán nuevamente.

Esto también funciona cuando los niños tienen un z-index negativo, y por lo tanto dejan de responder a los eventos de puntero.