HTML/CSS: hacer un div "invisible" para los clics?

Por varias razones, necesito poner un <div> (en su mayoría) transparente sobre algún texto. Sin embargo, esto significa que no se puede hacer clic en el texto (por ejemplo, para hacer clic en enlaces o seleccionarlo). ¿Sería posible simplemente hacer este div "invisible" para los clics y otros eventos del mouse?HTML/CSS: hacer un div "invisible" para los clics?

Por ejemplo, el overlay div cubre cubre el texto, pero me gustaría ser capaz de hacer clic/seleccionar el texto a través de la overlay div:

<div id="container"> 
    <p>Some text</p> 
    <div id="overlay" style="position: absolute; top: 0; 
          left: 0; width: 100%; height:100%"> 
     ... some content ... 
    </div> 
</div>

Fuente

2010-08-21 David Wolever

La respuesta corta es no. (Se ha debatido varias veces, pero los engañados son difíciles de encontrar para esto, no se le ocurren buenas palabras clave ...) ¿Para qué se necesita el DIV transparente? –

No creo que eso sea posible. ¿Tal vez hable de las "varias razones", es decir, de lo que realmente quiere lograr? – davehauser

@Null Retiraría el -1 hasta que quede claro lo que OP quiere hacer. –

128

Se puede hacer uso de CSS pointer-events. Esta propiedad es compatible con Firefox 3.6+, Chrome 2+, IE 11+ y Safari 4+. Lamentablemente, no tengo conocimiento de una solución alternativa para varios navegadores.

#overlay { 
    pointer-events: none; 
}

Fuente

2010-08-21 19:43:57

Ah, eso se ve bien! Ahora, el único problema es que tengo que hacer que algunos de los niños * acepten * eventos de puntero ... Pero tal vez Puedo darme cuenta. ¡Gracias! –

Genial: 'pointer-events: visible' parece que va a hacer * exactamente * lo que quiero. Gracias! –

¡Funciona en Chrome! ¡Me encanta que esto sea posible! –

Se puede hacer por recocido el evento después de ocultar temporalmente la superposición.

Ver la primera respuesta a esta pregunta: HTML "overlay" which allows clicks to fall through to elements behind it

Fuente

2010-08-21 19:28:53

-1

alternativo para deshabilitar todos los eventos (o pollo) en un div es unbind() todos los eventos asociados con las etiquetas por defecto

$('#myDivId').unbind();

$('#myDivId').unbind("click");

Fuente

2015-07-27 12:13:31

'jquery' ahora usa' off() 'a favor de' unbind() ', y solo elimina los manejadores, no impide que div capture el clic. – pmoleri

Usted puede hacer esto al ocultar la superposición de esta manera:

overlay.onclick = function(){ 
    window.event.srcElement.style.visibility = "hidden"; 
    var BottomElement = document.elementFromPoint((navigator.appName.substring(0,3) == "Net") ? e.clientX : window.event.x,(navigator.appName.substring(0,3) == "Net") ? e.clientY : window.event.y); 
    window.event.srcElement.style.visibility = "visible"; 
    BottomElement.click(); 
}

Fuente

2016-04-25 16:05:06

Utilice esta jQuery

$("div").click(function(e){e.preventDefault();});

reemplazar "div" con el ID de elemento o

Fuente

2018-02-27 20:14:10

HTML/CSS: hacer un div "invisible" para los clics?

Respuesta

Cuestiones relacionadas