div non cliccabile con posizione: fisso

Question

Voglio fare un div con position:fixed che si sovrapporrà al contenuto, ma non è cliccabile, cioè quando si fa clic nell'area di quel div si fa clic sul contenuto sottostante. Quindi il testo sotto il div potrebbe essere facilmente selezionato. C'è un modo per farlo?

Answer 1

La soluzione è aggiungere pointer-events: none; al CSS del div sovrapposizione. Ciò farà sì che tutti gli eventi puntino agli eventi per ignorare il div overlay.

Questo è dimostrato qui: http://jsfiddle.net/nayish/7hHvL/.

Si noterà che l'avviso, che è impostato solo per il div inferiore, funziona anche quando si fa clic sul div overlay.

Answer 2

Potrebbe essere necessario utilizzare un setCapture sul sottostante div durante la hoverOver di questa fisso div e releaseCapture durante la hoverOut

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

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

Answer 3

Tutto ciò che è sulla visualizzata davanti è anche ciò che viene cliccato. un modo per gestire questo è quello di rendere un grafico trasparente per i collegamenti che appare sopra i collegamenti e zindex che l'immagine trasparente di fronte al contenuto assoluto di posizione. Facile da fare se i collegamenti sono pulsanti di menu con una dimensione nota.

Aggiornamento un esempio

<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 posizione img: resti assoluti a posizione dello schermo corrente sopra il pulsante del menu div. zindex lo sposterà di fronte al contenuto fisso. È facile se si conosce lo spazio per il collegamento coperto.