Comment définir Ahover en fonction de la classe

":flotter"Est l'un des pseudo-classe les plus populaires utilisés pour ajouter un effet à tout élément sur la souris ou le curseur. Il n'est reconnu que dans la feuille de style CSS, ce qui signifie qu'il ne peut pas être appliqué dans CSS en ligne. Pour appliquer «: en survol» sur l'élément, il est préférable d'attribuer l'attribut de classe ou d'identification à l'élément et d'utiliser cette pseudo-classe à la feuille de style pour ajouter l'effet de survol.

Ce tutoriel expliquera:

• Qu'est-ce que «A: Hover» dans CSS?
• Comment définir «A: Hover» en fonction de la classe?

Qu'est-ce que «A: Hover» dans CSS?

"R: Rocher"Est utilisé pour ajouter un effet de survol sur les liens intégrés ou la balise d'ancrage. Ici, «A: Hover» comprend des étiquettes d'ancrage «»Et«: Hover »pseudo-classe. Il est généralement utilisé pour déclencher l'élément «» dans CSS. Il peut également ajouter des effets à l'élément «A» en modifiant la couleur du lien, le style du curseur, la couleur d'arrière-plan et bien d'autres.

Comment définir «A: Hover» en fonction de la classe?

Mettre en place "R: Rocher"Sur la base de la classe, essayez les instructions données.

Étape 1: Faites un conteneur «div»

Initialement, créez un conteneur à l'aide du ««Tag et attribuez-le un«identifiant" attribut.

Étape 2: Créez un autre conteneur «div»

Ensuite, créez un imbriqué "div«Conteneur entre le premier conteneur et attribuer un«classe»Attribut avec un nom particulier.

Étape 3: Insérez la balise «»

Ensuite, insérez le «”Tag qui est utilisé pour lier une page à une autre. Ensuite, insérez l'attribut mentionné à l'intérieur de la balise d'ouverture «», où:

• "classe"Est utilisé pour identifier de manière unique l'élément avec un nom.
• "href»L'attribut est utilisé pour maintenir l'URL d'une autre page ou adresse de destination:

Page d'accueil
Maison
sur moi

La sortie du code ci-dessus est la suivante:

Étape 4: Style le principal conteneur «div»

Pour styliser le conteneur principal «div», tout d'abord, accédez au «”Élément par nom d'identification avec le"#»Selecteur. Dans notre cas, nous avons utilisé «# Main-DIV". Ensuite, appliquez les propriétés ci-dessous:

# main-div
Border: 3px bleu massif;
marge: 20px 50px;
rembourrage: 50px;
taille de police: plus grand;
Color d'arrière-plan: bisque;

Ici:

• Le "frontière«La propriété est utilisée pour définir une frontière ou un contour autour de l'élément.
• "marge"Alloue un espace à l'extérieur de la frontière définie.
• "rembourrage"Est utilisé pour spécifier l'espace à l'intérieur de la limite définie et autour du contenu de l'élément.
• "taille de police»La propriété détermine la taille de la police.
• "Couleur de l'arrière plan"Est utilisé pour définir la couleur à l'arrière de l'élément dans une limite.

Sortir

Étape 5: Définissez «A: Hover» en fonction de la classe

Maintenant, accédez à l'Inner "div"Élément utilisant la classe attribuée avec sélecteur de points".menu principal"Et utilisez le"R: Rocher«Pseudo classe pour ajouter un effet de survol au«" élément.

À cette fin, appliquez les propriétés mentionnées:

.Main-menu A: Hover
Couleur: RVB (247, 137, 12);
Border: 2px en pointillé bleu;
Border-Radius: 20%;

Voici la description du code mentionné ci-dessus:

• "couleur»La propriété est utilisée pour définir la couleur du texte.
• "frontière»Définit une frontière autour du«" élément. Par exemple, nous avons appliqué une bordure bleue en pointillé sur vol.
• "rayon frontalier”Définit les bords de l'élément en forme arrondie:

Il s'agissait de définir A: Hover basé sur la classe dans CSS.

Conclusion

Pour définir le «R: Rocher«Pseudo-classe basée sur la classe, tout d'abord, crée un conteneur div en utilisant le«»Tag et attribuez-lui un attribut de classe. Ensuite, insérez un «»Élément pour lier une autre page Web. Après cela, accédez à l'élément «div» à l'aide de la classe et appliquez l'effet de survol sur le lien à l'aide de «A: Hover». Ce message a démontré la méthode de définition du «A: Hover» en fonction de la classe.