link - style html

CSS: el control deslizante pasa a través de los elementos para activar el desplazamiento sobre el elemento 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 muchas otras cosas.

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

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

¿Hay alguna manera de diseñar un elemento para que permita 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 esa ruta en este momento para mantener las cosas tan simples como puedan. Estaré complicando las cosas con JavaScript lo suficiente más tarde.

Gracias

PD: 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

Además, algo que la gente puede considerar útil es que puede volver a habilitar los eventos de puntero en los elementos secundarios del elemento pointer-events: none al configurarlos en eventos de puntero: auto explícitamente. Esto no parece estar bien documentado y resulta muy útil. - slicedtoad

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

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

Answer 2

puedes usar pointer-events: none; al elemento en la parte superior:

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

como puedes ver, cuando colocas el elemento en la parte superior, el elemento detrás se activa. 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;
}