Comment puis-je créer du texte cliquable sous une superposition sans bloquer les événements de la souris ?

Surmonter les interférences de clics avec un div « invisible »

Pour améliorer la convivialité des pages Web, il est souvent souhaitable de superposer des éléments au-dessus du texte, mais sans entraver la fonctionnalité de clic sur le contenu sous-jacent. Ce dilemme survient lorsque le div de superposition empêche les événements de souris d'atteindre les éléments cliquables en dessous.

N'ayez crainte, CSS propose une solution via la propriété pointer-events. Prise en charge par les navigateurs modernes tels que Firefox 3.6 , Chrome 2 , IE 11 et Safari 4 , cette propriété vous permet de configurer le comportement des événements de souris sur des éléments spécifiques.

Pour rendre un div de superposition "invisible" aux clics , appliquez simplement la règle CSS suivante :

<code class="css">#overlay {
  pointer-events: none;
}</code>

Ce code indique effectivement au navigateur d'ignorer les événements de souris initiés à partir du div #overlay. Par conséquent, le texte sous-jacent reste accessible pour le clic, la sélection et d'autres interactions avec la souris.

Voici un extrait de code révisé démontrant cette technique :

<code class="html"><div id="container">
    <p>Some text</p>
    <div id="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height:100%">
        ... some content ...
    </div>
 </div></code>

<code class="css">#overlay {
  pointer-events: none;
}</code>

En tirant parti du pointeur- événements, vous pouvez créer des divs superposés qui améliorent de manière transparente les pages Web sans perturber les interactions prévues de l'utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!