简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel CSS > le corps du texte

Comment faire en sorte que la balise HTML change de couleur lorsque la souris survole, et comment contrôler le style de survol de la souris de la balise a à l'aide de CSS​

寻∝梦
Libérer： 2018-09-07 13:38:13
original
30271 Les gens l'ont consulté

Cet article parle principalement de la balise html a qui fait changer la couleur du survol de la souris, ainsi que d'autres styles de CSS pour contrôler le survol de la souris. Il contient des exemples de didacticiels détaillés, qui peuvent aider tout le monde à apprendre plus rapidement. Jetons un coup d'œil ensemble à cet article

Tout d'abord, jetons un coup d'œil à la balise a dans le changement HTML. couleur lorsque la souris survole :

Tout le monde devrait connaître l'attribut css de la balise a en HTML lorsque la souris survole Oui, c'est de cela dont nous parlons aujourd'hui.

:hover : Cela a déjà été dit lors de l'utilisation de la balise a pour parler du style CSS. Il existe de nombreuses fonctions de survol de la souris. Aujourd'hui, nous allons parler de la balise a en HTML qui change de couleur lorsqu'elle est survolée. Tout le monde devrait l’utiliser fréquemment.

Jetons d'abord un exemple du code complet : 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style>
.link_1:hover{color:pink;}
</style>
</head>
<body>
<a href="#" class="link_1">这里是PHP中文网</a>
</body>
</html>
Copier après la connexion

Il s'agit d'un code de base qui définit le nom de link_1. La fonction est que lorsque la souris survole le texte, le texte change de couleur.

Jetons un coup d'œil à l'effet d'affichage dans Google Chrome :

Comment faire en sorte que la balise HTML change de couleur lorsque la souris survole, et comment contrôler le style de survol de la souris de la balise a à laide de CSS​

Regardez, voici l'effet avant que la souris ne soit placée. L'effet de sa mise en place :

Comment faire en sorte que la balise HTML change de couleur lorsque la souris survole, et comment contrôler le style de survol de la souris de la balise a à laide de CSS​


C'est le résultat du déplacement de la souris vers le haut. Est-ce exactement la même chose que ce que nous avons défini. .

Maintenant que nous avons parlé de l'effet de décoloration du survol de la souris, nous devrions maintenant parler des trois autres effets du survol de la souris. Jetons-y un coup d'œil :

<🎜. >
  • :hover{font-size: 60px;}Déplacez la souris vers le haut et elle deviendra plus grande

  • :hover{text-decoration:underline;}Déplacez le souris vers le haut et un soulignement apparaîtra

  • :hover{background:#ccc;}Déplacez la souris vers le haut pour changer la couleur d'arrière-plan (:{background:#ccc;} le lien apparaît avec un couleur d'arrière-plan)

Comme mentionné ci-dessus, nous pouvons faire beaucoup de choses au survol de la souris, et nous allons les montrer ensemble maintenant (Si vous souhaitez en savoir plus sur les styles CSS, rendez-vous sur. le site Web PHP chinois

Manuel d'apprentissage CSSColumn Learning) Jetons maintenant un coup d'œil au code et aux effets

html d'une balise code complet de style de contrôle CSS : 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style>
.link_1:hover{color:pink;}
.link_2:hover{font-size:60px;}
.link_3:hover{background:red;}
</style>
</head>
<body>
<a href="#" class="link_1">这里是PHP中文网</a>
<a href="#" class="link_2">这里是PHP中文网</a>
<a href="#" class="link_3">这里是PHP中文网</a>
</body>
</html>
Copier après la connexion
Comme ci-dessus, nous en avons défini trois. Il existe deux codes de style CSS, le premier consiste à changer la couleur, le second consiste à changer la taille et le troisième consiste à changer l'arrière-plan.

Regardons d'abord les effets un par un Après avoir vu le premier, passons directement au second :


Comment faire en sorte que la balise HTML change de couleur lorsque la souris survole, et comment contrôler le style de survol de la souris de la balise a à laide de CSS​

Comme image. , c'est comme ça que rien n'a été touché. Maintenant, mettons la souris sur la deuxième connexion pour voir l'effet :

Comment faire en sorte que la balise HTML change de couleur lorsque la souris survole, et comment contrôler le style de survol de la souris de la balise a à laide de CSS​

C'est l'effet de la mise en place. Il est évident que 60 pixels présentent de grands avantages, mais vous pouvez expérimenter avec de petits pixels et ce sera efficace. Maintenant, regardons le troisième :

Comment faire en sorte que la balise HTML change de couleur lorsque la souris survole, et comment contrôler le style de survol de la souris de la balise a à laide de CSS​

Ceci Le troisième effet. est comme indiqué sur la figure. Lorsque vous placez la souris dessus, il se transforme en un fond rouge. Parce que nous définissons la couleur rouge, le fond rouge est affiché. Cet effet est encore très évident.

D'accord, c'est de ce dont nous parlons dans cet article sur la décoloration des balises HTML a et d'autres styles de survol de la souris (si vous voulez en savoir plus sur les styles CSS, rendez-vous sur PHP Site Web chinois

manuel d'apprentissage CSS colonne d'apprentissage). Si vous avez des questions, vous pouvez les poser ci-dessous.

【Recommandation de l'éditeur】

Comment mettre en place une liste non ordonnée en CSS ? Résumé des styles de liste en CSS

Comment utiliser CSS pour définir la couleur d'arrière-plan du texte ? Explication détaillée du code couleur d'arrière-plan CSS

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!

Étiquettes associées：
:hover a css
source：php.cn
Article précédent：Comment utiliser la position d'arrière-plan de la position de l'image d'arrière-plan en CSS Article suivant：Comment ajouter un style de bordure au tableau CSS ? Résumé des styles de bordure de tableau CSS (avec exemples complets)
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Événements de survol JavaScript sur des pseudo-éléments spécifiques au fournisseur Il s'agit de HTMLinput.$("input[type='range']::-webkit-slider-thumb").on('hover'...
Depuis 2024-04-06 15:35:24
0
1
274
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！