2010-12-10 7 views
5

Tengo este diseño para un libro HTML y estoy tratando de lograr un cierto efecto de desvanecimiento del texto al desplazarme por la página que hice con éxito utilizando un div fijo con un valor de índice Z superior y una imagen de fondo PNG.¿Cómo hacer enlaces detrás de un div con un valor de índice z superior en el que se puede hacer clic?

.book-bg { 
background: url(../../img/book-frame-bg.png) no-repeat fixed center top; 
position: fixed; 
left: 0; 
right: 0; 
top: 0; 
bottom: 0; 
z-index: 100;} 

Pero ahora todos mis enlaces que cubrían por el div ".book-bg" no se puede hacer clic, ¿cómo puedo solucionar esto?

Página de muestra aquí: http://mmahgoub.com/thebook/chapter-01.html

Gracias

Respuesta

11

En Firefox, Opera and Chrome/Safari podría utilizar pointer-events: none en su regla CSS. Si necesita compatibilidad con IE también, intente Forwarding Mouse Events Through Layers.

+0

¡Guau! eso fue realmente útil, muchas gracias. – mmahgoub

+0

Por extraño que parezca IE9 no reconoce los eventos de puntero: ninguno; ¡qué lástima! – mmahgoub

+0

@mmahgoub Se supone que es para SVG, no espero que IE lo soporte en HTML hasta que haya agregado soporte para SVG. – robertc

1

sus enlaces necesitarán un índice Z más alto, para esto necesitarán colocarse, relacionarse, flotar o fijarse.

Cuestiones relacionadas