2011-08-24 24 views
12

Quiero hacer un div con position:fixed que se superponga al contenido, pero no se puede hacer clic, es decir, cuando hace clic en ese área del div está haciendo clic en el contenido debajo de él. Entonces, el texto debajo del div se puede seleccionar fácilmente. ¿Hay una manera de hacer eso?div no seleccionable con posición: fijo

+4

'pointer-events: none' puede hacerlo ... –

Respuesta

28

La solución es agregar pointer-events: none; al CSS del div superpuesto. Esto hará que todos los eventos señalen los eventos para ignorar el div superpuesto.

Esto se demuestra aquí: http://jsfiddle.net/nayish/7hHvL/.

Observará que la alerta, que está configurada solo para el div inferior, también funciona cuando se hace clic en el div superpuesto.

+2

¡Esta es una gran solución! –

+1

No funciona para IE <= 10 http://caniuse.com/pointer-events – Nils

+2

Pero en enero del próximo año, 2016, IE 9 y 10 ya no serán compatibles con Win 7 o superior :-) – KajMagnus

0

Puede que tenga que utilizar un setCapture en el div subyacente durante el hoverOver de esta fijo div y releaseCapture durante el hoverOut

var underlyingDiv = document.getElementById ("div1"); 
var overlyingDiv = document.getElementById ("div2"); 

overlyingDiv.onHoverOver = "underlyingDiv.setCapture"; 
overlyingDiv.onHoverOut = "underlyingDiv.releaseCapture"; 
+0

El método setCapture solo funciona en Internet Explorer, pero bueno. – Wayne

0

lo que está en frente está representada también es lo que se hizo clic. Una forma de manejar eso es hacer un gráfico transparente para los enlaces que aparecen sobre los enlaces y zindex esa imagen transparente frente a la posición de contenido absoluto. Fácil de hacer si los enlaces son botones de menú con un tamaño conocido.

actualización de un ejemplo

<a href="#"> 
<img src="transparent.gif" width="100" height="100" style="position:absolute; zindex:100"> 
</a> 
<div style="width:100px; height:100px"> 
this is my menu button 
</div> 

La posición img: restos absolutos en la posición actual de la pantalla sobre el botón de menú div. zindex lo empujará delante del contenido fijo. Es fácil si conoce el espacio para el enlace que está cubierto.

+0

Esto suena como una solución muy complicada a un problema muy simple ... – Nayish

Cuestiones relacionadas