Faire en sorte que les divisions superposées ne soient pas cliquables afin que le contenu situé en dessous soit accessible ?

Question

J'utilise une superposition JPG avec une opacité réduite pour un effet, mais je veux que ce soit un effet seulement et que le contenu sous cette division soit cliquable. Est-ce possible, merci :))))

Merci à tous pour vos commentaires. Je suppose que je vais devoir trouver autre chose car le JPEG couvre toute la page :)

Answer 1

Eh bien, il y a pointer-events:none; mais seulement quelques navigateurs les navigateurs modernes (et IE11) le prennent en charge.

https://developer.mozilla.org/en/CSS/pointer-events

Answer 2

Oui, c'est possible

Utilisez pointer-events: none ainsi que les déclarations conditionnelles de CSS pour IE11 (car cela ne fonctionne pas dans IE10 ou en dessous), vous pouvez obtenir une solution compatible avec tous les navigateurs pour y parvenir.

Utilisation de AlphaImageLoader vous pouvez même mettre du transparent .PNG/.GIF dans la superposition div et que les clics se propagent jusqu'aux éléments situés en dessous.

CSS :

pointer-events: none;
background: url('your_transparent.png');

IE11 conditionnel :

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

Voici un page d'exemple de base avec tout le code.

Answer 3

Non, ça ne l'est pas. L'élément superposé interceptera toujours le clic. Une solution de contournement possible consiste à lier une balise click à l'élément superposé, puis obtenir la position actuelle de la souris et la comparer à la position de l'élément sous-jacent afin de déterminer si cet élément doit ou non enregistrer un clic. Mais il y a de fortes chances qu'il existe un meilleur moyen d'y parvenir. Sans voir votre code, cependant, je n'ai aucun moyen de le savoir.

Answer 4

Une astuce simple que j'ai trouvée, bien que pas très w3c, est d'encapsuler le div dans un span et d'utiliser cette classe de span pour faire la superposition. De cette façon, l'ensemble sera cliquable, et le div se comportera comme un div.