Faire en sorte que les div qui se chevauchent soient "non cliquables" afin que le contenu ci-dessous soit accessible?
J'utilise un calque JPG avec une opacité réduite pour un effet, mais je ne le souhaite que comme effet et rend le contenu situé en dessous de celui-ci cliquable. Est-ce possible, merci :)))
Merci pour vos commentaires tout le monde. Je suppose que je devrai penser à autre chose car le JPEG couvre toute la page :)
Eh bien il y a pointer-events:none; mais seulement quelques navigateurs les navigateurs modernes (et IE11) le supportent.
Non ce n'est pas. L'élément superposé interceptera toujours le clic. Une solution possible consiste à lier un événement click à l'élément superposé, puis à obtenir la position actuelle de la souris et à la comparer à la position de l'élément inférieur afin de déterminer si cet élément doit ou non enregistrer un clic. Mais il y a fort à parier qu'il existe un bien meilleur moyen d'y parvenir. Sans voir votre code, cependant, je n'ai aucun moyen de le savoir.
Oui c'est possible
Utilisez pointer-events: none avec les instructions conditionnelles de CSS pour IE11 (car cela ne fonctionne pas dans IE10 ou une version antérieure), vous pouvez obtenir une solution compatible entre plusieurs navigateurs pour y parvenir.
En utilisant AlphaImageLoader, vous pouvez même mettre des .PNG/.GIFs transparents dans la superposition div et faire en sorte que les clics se propagent à travers les é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 exemple de page basic avec tout le code.
un truc simple que j'ai trouvé, bien que très peu w3c, est d'encapsuler la div dans un span et d'utiliser cette classe pour faire la superposition . Ainsi, le tout sera cliquable, et la div se comportera comme une div