Haga clic a través de div con un canal alfa

Question

Estoy tratando de replicar la capa de "fundido de salida" de Twitter en la parte inferior del widget de feed (en su página principal en twitter.com).

La única forma en que podía pensar que no utilizaba html5 era ubicar un div en posición absoluta sobre el div de alimentación, y darle un png canalizado con un gradiente de blanco a transparente encima. Esto fue fácil de lograr.

El único problema ahora es que no se puede hacer clic en los divs que aparecen debajo de las capas transparentes. ¿Alguna idea sobre cómo hacer que se pueda hacer clic en los div? Tal vez tienes otro método para replicar este efecto por completo?

Gracias!

Answer 1

En este artículo se describe un método para capturar el evento onclick y manejarlo ocultando momentáneamente la superposición, reactivando el clic y luego volviéndola a ocultar. La ocultación no debería ser visible para el usuario final.

Forwarding Mouse Events Through Layers:

1. El área de texto (mi elemento de enmascaramiento) que se coloca sobre la rejilla recibe mouseover, mousemove, mousedown, mouseup y otros eventos.
2. La capa de máscara superior está oculta por un momento, , por lo que podemos averiguar qué elemento es debajo de la máscara en la ubicación del evento.
3. El evento se vuelve a activar; aquí es donde entran en juego el modelo de evento DOM W3 y el equivalente de Microsoft más simple.
4. Inicie el proceso nuevamente - listo para el próximo evento.

EDIT: Creo que lo que Twitter hace en realidad es mucho más simple. Hay una propiedad de CSS tomada de SVG que muchos navegadores han implementado.

.overlay { pointer-events: none; } 

Esta es soportado actualmente en Firefox 3.6+, Safari 4 y Google Chrome - por lo que si usted es feliz para que sólo el trabajo de estos navegadores, entonces esto es una opción mucho más simple, con la ventaja añadida de que se también funciona para eventos de hover, no solo para hacer clic en eventos.

Answer 2

Para IE, acaba de establecer el fondo div o layer de usar un índice negativo, como este:

{pointer-events: none; z-index: -100}