Sto usando una sovrapposizione JPG con una opacità ridotta per un effetto, tuttavia lo voglio solo come effetto e rendere il contenuto al di sotto di quel div cliccabile. È possibile, grazie :)))Fare div div "non selezionabile" in modo che il contenuto sottostante sia accessibile?
Grazie per i vostri commenti a tutti. Immagino che dovrò pensare a qualcos'altro perché il JPEG copre l'intera pagina :)
Bene c'è pointer-events:none; ma solo
alcuni browser
browser moderni (e IE11) lo supportano.
No, non lo è. L'elemento di sovrapposizione intercetterà sempre il clic. Una soluzione possibile è associare un evento click all'elemento di sovrapposizione e quindi ottenere la posizione corrente del mouse & confrontarla con la posizione dell'elemento sottostante per determinare se quell'elemento debba registrare o meno un clic. Ma c'è la possibilità che ci sia un modo molto migliore per farlo. Senza vedere il tuo codice, tuttavia, non ho modo di saperlo.
Ora puoi usare 'pointer-events: none;' – Keavon
Sì, la sua possibile
Usa pointer-events: none con istruzioni condizionali di CSS per IE11 (in quanto non funziona in IE10 o al di sotto), è possibile ottenere una soluzione compatibile cross browser per raggiungere questo obiettivo .
Utilizzando AlphaImageLoader, è possibile anche inserire .PNG/.GIF s trasparente nell'overlay div e fare propagare i clic sugli elementi che si trovano sotto.
CSS:
pointer-events: none;
background: url('your_transparent.png');
IE11 condizionale:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;
Ecco un basic example page con tutto il codice.
un semplice trucco che ho trovato, anche se non molto w3c, è quello di incapsulare il div in un intervallo e utilizzare quella classe span per rendere l'overlay. In questo modo tutto sarà cliccabile, e il div si comporterà come un div
Penso che il termine corretto sia hit-testing; e che è generalmente impossibile sulle reti. – Gleno
Il modo più veloce a cui riesco a pensare: inserire il contenuto in un wrapper, renderlo leggermente trasparente e posizionare il JPG dietro di esso. –
Questo è abbastanza intelligente Doug, grazie :) – pufAmuf