Le sélecteur de volants fait partie de la pseudo-classe. Cet effet est utilisé pour coiffer le contenu dans le HTML lorsque le curseur de la souris plane sur eux. Nous pouvons appliquer cet effet à n'importe quel élément. Cet article contient une utilisation de base d'une classe de volants dans HTML et CSS.

But de l'effet de survol

Dans n'importe quel document ou navigateur, nous utilisons les liens vers des sites Web pour l'aide de l'utilisateur. À cette fin, nous pouvons styliser les liens des pages qui ne sont pas encore visitées en utilisant la classe de sélecteur de liens. De même, pour les liens déjà visités, nous utilisons le sélecteur visité. Un sélecteur actif est utilisé pour les liens actifs. Ce sont tous les styles de liens qui montrent les effets sur le plan de vol. Si le lien et le sélecteur des liens visités sont tous deux présents dans la définition CSS, nous utilisons une classe de sélecteur de volant pour voir l'effet résultant.

D'un autre côté, chaque fois que nous voulons osciller sur n'importe quel élément de HTML, il provoque certains effets en utilisant certaines propriétés dans CSS, soit sur le contenu existant, soit sur la forme du nouvel élément à la suite de la survol en volant.

Syntaxe de l'élément de survol

Content_of_html: hover
// Déclarer le code CSS ou les effets que vous souhaitez appliquer.

Exemple 1: Hover modifie la couleur du texte

Cet exemple traite de la transformation du texte lorsque nous déplaçons le curseur de la souris vers elle. Nous pouvons appliquer les plusieurs conditions au texte. Mais pour l'instant, les deux changements de base qui suivent sont: le changement de couleur du texte sur lequel le survol est appliqué et le point culminant du texte avec un changement de couleur d'arrière-plan.

À partir de la section HTML Head, utilisez la balise de style à l'intérieur comme nous faisons un style interne. Utilisez la section de style à l'intérieur de la balise. Une classe de volants est utilisée pour appliquer tous les effets sur le texte de la rubrique. Ainsi, H1 est utilisé avec la classe de survol.

H1: Hover
Couleur blanche;
Color en arrière-plan: violet;

Les deux propriétés, comme nous l'avons discuté précédemment, sont appliquées. Par défaut, la couleur de l'en-tête est noire et la couleur d'arrière-plan de la page Web est blanche. Mais en survol, la couleur d'arrière-plan de cette partie spécifiée devient violet, donc la couleur du texte se transforme également en blanc.

Code HTML CSS:

Fermez l'étiquette de style et la section tête de HTML. Se dirigeant vers la partie corps, une tête1 est déclarée. L'alignement pour la tête1

est réglé au centre. Fermez toutes les balises et enregistrez le fichier des éditeurs de texte. Pour exécuter la sortie, nous devons exécuter le fichier dans le navigateur. Lors de l'enregistrement du fichier, une chose doit être gardée à l'esprit: enregistrez le fichier avec l'extension HTML au lieu de l'enregistrer avec l'extension de texte. Ouvrez avec le navigateur par défaut afin que vous puissiez obtenir la sortie.

Sortir:
Vidéo playerhttps: // linuxhint.com / wp-content / uploads / 2022/06 / vidéo2.MP400: 0000: 0000: 10 Flèches Utiliser / bas pour augmenter ou diminuer le volume.

La sortie du navigateur est capturée sous la forme d'une vidéo de quelques secondes qui conduit à l'excès dans l'affichage des résultats. Lors de l'exécution du fichier, vous verrez qu'une simple rubrique au centre de la page Web apparaît. Lorsque nous prenons le curseur près de l'en-tête ou de la survole sur le cap, la couleur d'arrière-plan et la couleur de la police sont modifiées. Chaque fois que le curseur est retiré, il revient à la valeur par défaut.

Exemple 2: Hover construit un bloc avec du texte

Contrairement à l'exemple précédent où le texte existant a été modifié en survol, dans cet exemple, un nouveau contenu (bloc) de HTML est ajouté qui est illustré uniquement lorsque nous survons le texte spécifié. Ce bloc a également quelques dimensions et spécifications. Laissez-nous élaborer sur la procédure.

En commençant par la section CSS, nous tyle un div. Cette div crée un bloc de contenu qui est le résultat de la survol du texte. La largeur et la hauteur sont les deux valeurs de base appliquées pour former n'importe quelle forme en html. Vient ensuite la propriété de rembourrage. C'est la zone de distance du contenu à l'intérieur d'un bloc ou d'une forme. Par exemple, nous avons pris un texte à l'intérieur du bloc, de sorte que la distance du texte et la limite de la forme sont prises comme le rembourrage. Si seulement le rembourrage est utilisé, cela signifie que c'est la distance à l'intérieur de la boîte de chaque côté. Si le rembourrage est effectué d'un côté spécifié, puisque nous avons utilisé le rembourrage de la droite, cela signifie que c'est la distance sur le côté droit. Cette propriété maintient le texte à l'intérieur de la limite du bloc. Sinon, il y a des chances de dépasser le texte de la frontière du bloc.

Rembourrage: 20px;
Rembourrage à droite: 50px;

Cet effet de rembourrage est appliqué pour aligner le contenu intérieur avec le contenu extérieur. La valeur est prise en pixels.

Code CSS:

La taille de la police et la couleur de la police du texte sont appliquées au texte à l'intérieur du bloc. La section de style suivant concerne l'en-tête que nous avons appliqué dans le survol. Comme le bloc de contenu est créé à l'intérieur du div, Div est inclus dans ce type de style ensemble. Le contenu de forme de bloc est créé qui est mentionné pour former un affichage.

H3: Hover + div
Bloc de visualisation;

Après cela, fermez le style et les étiquettes de tête. Déclarer une direction à l'intérieur du corps HTML. Un div est formé. Le texte qui sera mentionné à l'intérieur du bloc est également écrit à l'intérieur des tags div. Fermez l'étiquette du corps.

Code corporel HTML:

Enregistrez le code dans le fichier et exécutez-le dans le navigateur. En tant que sortie du code précédent, nous avons pris une petite partie de la vidéo pour développer le fonctionnement de la classe de survol qui est créé et conçu pour créer un bloc avec un texte à l'intérieur du bloc.

Sortir:
Vidéo playerhttps: // linuxhint.com / wp-content / uploads / 2022/06 / vidéo3.MP400: 0000: 0000: 13 User les touches fléchées vers le haut / vers le bas pour augmenter ou diminuer le volume.

La vidéo montre qu'un texte simple comme une rubrique s'affiche lorsque nous exécutons le fichier dans le navigateur. Mais lorsque nous survons le texte, cela provoque un changement sur la page Web. En survol, le texte de l'en-tête reste le même qu'au moment de l'exécution. Mais un bloc sur le côté gauche de la page est créé chaque fois que nous déplaçons le curseur vers la tête. Lorsque nous éloignons le curseur de la tête, le bloc disparaît. C'est parce que la classe de survol crée un bloc et un texte à l'intérieur. Tous les effets sur le bloc et le texte sont appliqués dans CSS.

Conclusion

CSS Hover est une propriété utilisée pour proéminer ou mettre en évidence le contenu HTML lorsque nous déplaçons le curseur vers eux. Cette fonction est principalement utilisée pour informer quelque chose. Dans cet article, nous avons expliqué le fonctionnement d'une classe de volants et comment les contenus HTML sont transformés en survol. Au début, nous avons donné un bref aperçu de la classe de volants. Nous avons mis en œuvre les deux exemples de base de l'effet de survol. Le premier exemple contient l'effet sur le texte existant, tandis que le deuxième exemple consiste à afficher une forme supplémentaire sur le texte existant tandis que le texte existant reste le même.