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-tutoriel CSS-php.cn

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

30356 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!

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​

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