HTML "overlay" qui permet de clics à l'automne grâce à des éléments derrière elle

Question

Je suis en train de superposition d'un élément sur une page web (pour dessiner des graphiques), et je suis arrivé au point où je peux la pile à l'intérieur d'un élément au-dessus de tout, mais cela évite à l'utilisateur de cliquer sur tous les liens/boutons/etc. Est-il un moyen d'avoir son contenu flotter au-dessus de tout (il est semi-transparent, de sorte que vous pouvez toujours voir ce qui est derrière) et demandez à l'utilisateur d'interagir avec le calque de dessous?

J'ai trouvé beaucoup d'informations sur le modèle d'événements DOM, mais rien de tout cela résout le problème où les boutons et autres "indigènes", les contrôles ne semblent jamais à faire les clics dans la première place.

Merci pour toute aide!

Answer 1

J'ai posé une question similaire, et Ionuț G. Stan a donné cette réponse:

Il peut être fait à l'aide de CSS pointer-events dans Firefox >= 3.6, Safari >= 4.0 et Chrome >= 2 (voir la table de support ici). Malheureusement, je n'ai pas connaissance d'un cross-browser solution de contournement.

#overlay {
  pointer-events: none;
}

Answer 2

Ma suggestion serait que vous pouvez capturer l'événement click avec la superposition, de masquer la superposition, puis refire l'événement de clic, puis afficher la superposition de nouveau. Je ne suis pas sûr si vous souhaitez obtenir un effet de scintillement.

[Mise à jour] Exactement ce problème et exactement ma solution juste d'apparaître dans ce post: "Transfert des Événements de la Souris à Travers les Couches". Je sais que je suis probablement un peu tard pour l'OP, mais pour l'amour de quelqu'un ayant ce problème à l'avenir, je pensais que je voudrais l'inclure.

Answer 3

Pour l'enregistrement d'une approche alternative pourrait être de rendre cliquable couche de la superposition: vous faites, il est semi-transparent et placez ensuite la "superposition" de l'image derrière elle (un peu contre toute attente intuitive, la "superposition" de l'image peut ensuite être opaque). Selon ce que vous voulez faire, vous pourriez bien être en mesure d'obtenir exactement le même effet visuel d'une image et d'un lien de la couche semi-transparente les unes au dessus des autres), tout en évitant clickability problèmes (car la "superposition" est en fait dans le fond).

Answer 4

Dans le cas où quelqu'un d'autre est en cours d'exécution pour le même problème, la seule solution que j'ai pu trouver que satisfait de moi était d'avoir la couverture de toile tout pour le tout et d'élever le Z-index de tous les éléments cliquables. Vous ne pouvez pas tirer sur eux, mais au moins ils sont cliquables...

Answer 5

Vous pouvez utiliser une superposition avec une opacité pour les boutons/les ancres dans le rester visible, mais une fois que vous avez superposition sur un élément, vous ne pouvez pas cliquer dessus.