Les développeurs peuvent utiliser d'autres éléments dans un conteneur div. Supposons que vous souhaitiez cliquer sur tous les éléments sous-jacents accessibles via le div. La plupart des développeurs auront des problèmes graves car ils ne peuvent cliquer que des éléments sous-jacents s'ils cliquent sur le côté extérieur pour la superposition dans la div. Pour gérer une telle situation, optez pour la possibilité de cliquer sur le div créé.

Ce message expliquera la méthode pour cliquer sur le div pour sous-jacent aux éléments de CSS.

Comment cliquer sur Div aux éléments sous-jacents dans CSS?

Pour cliquer sur un div sur des éléments sous-jacents dans CSS, créez d'abord une div principale avec un nom particulier et ajoutez un "»Élément pour définir l'hyperlien, qui est utilisé pour lier une page à une autre. Ensuite, insérez une balise «» en suivant la même procédure et spécifiez un nom de classe.

Étape 1: Créez un conteneur div

Tout d'abord, utilisez le ««Élément pour créer un conteneur« div »dans un fichier html. Ensuite, spécifiez un «identifiant«À l'intérieur de la balise d'ouverture« Div »avec une valeur particulière.

Étape 2: Créer un conteneur div imbriqué

Ensuite, faites un autre conteneur Div dans le premier conteneur en suivant la même procédure.

Étape 3: Insérer la tête

Après cela, utilisez la balise d'en-tête HTML pour ajouter un titre. Dans ce scénario, le «

”La balise d'en-tête est utilisée.

Étape 4: Ajoutez un élément pour les éléments sous-jacents

Maintenant, insérez un «»Élément pour lier une page à un autre. Pour ce faire, ajoutez le «href«Attribut dans la balise« »et définissez la valeur de cet attribut pour attribuer le lien du site Web:

Clique sur le lien

= "https: // linuxhint.com "> non réactif



= "https: // linuxhint.com "> réactif

Sortir

Étape 5: Style Conteneur Div Main Div

Accédez à la div principale à l'aide du sélecteur d'attributs et du nom comme «.contenu principal»:

#contenu principal
marge: 30px 50px;
Border: Green en pointillé 3px;
rembourrage: 20px 40px;
Color en arrière-plan: RVB (207, 250, 207);

Maintenant, appliquez les propriétés CSS ci-dessus:

• "marge"Est utilisé pour spécifier l'espace autour de la limite de l'élément.
• "frontière»Détermine la bordure à l'extérieur de l'élément défini.
• "rembourrage"Attribution de l'espace à l'intérieur de la limite définie.
• "Couleur de l'arrière plan”Déployé pour régler la couleur à l'arrière de l'élément.

En conséquence, le récipient principal sera stylé comme suit:

Étape 6: Appliquer la propriété «Pointer-Events»

Maintenant, accédez au conteneur imbriqué en utilisant le nom de classe comme «.racine»:

.racine
Pointer-Events: Aucun;

Ensuite, appliquez le «événements de pointeur”Pour gérer les composants HTML qui réagissent aux événements de souris et de contact. Dans ce scénario, la valeur de «événements de pointeur"Est défini comme"aucun», Ce qui signifie que l'élément ne réagit pas aux événements de pointeur:

Étape 7: Accédez à la classe infantile

Maintenant, accédez au «”Tag avec le nom de classe comme«.enfant". Ensuite, appliquez le «événements de pointeur»Propriété et définissez la valeur comme«auto»:

.enfant
Pointer-Events: Auto;

Le "auto"La valeur est utilisée pour réagir aux événements de pointeur comme cliquer.

Sortir

Il s'agit de cliquer sur Div aux éléments sous-jacents dans CSS.

Conclusion

Pour cliquer sur Div aux éléments sous-jacents, faites d'abord une div principale avec un nom particulier et ajoutez un cours ou un attribut d'identification. Ensuite, insérez le «”Element et ajoutez l'attribut de classe en tant qu'enfant. Après cela, accédez à la div et appliquez le «événements de pointeur"Avec la valeur aucune. Ensuite, accédez à l'attribut enfant et postulez "événements de pointeur"Avec la valeur"auto". Cet article a démontré la méthode pour cliquer sur Div aux éléments sous-jacents.