Maison > Article > interface Web > Exemple montrant comment utiliser le survol du sélecteur de pseudo-classe en CSS

Exemple montrant comment utiliser le survol du sélecteur de pseudo-classe en CSS

yuliaoriginal: 2018-10-23 15:47:215238parcourir

Lors de la mise en page, le sélecteur de survol en CSS est souvent utilisé. Il peut définir un style spécial lorsque la souris passe dessus. En tant que développeur front-end, vous savez Comment utiliser le sélecteur de pseudo-classe CSS. survoler ? Cet article vous expliquera comment utiliser le survol en CSS et des exemples Il a une certaine valeur de référence et les amis intéressés peuvent y jeter un œil.

Le survol du sélecteur de pseudo-classe peut définir certains styles spéciaux lorsque la souris se déplace sur le lien, tels que la taille de la police, la couleur d'arrière-plan, l'affichage et le masquage, etc.

Remarque : Le survol du sélecteur de pseudo-classe peut agir sur tous les éléments, pas seulement sur les liens.

Les sélecteurs similaires au survol incluent le lien, le visité et l'actif. Le sélecteur de lien peut définir le style de lien qui n'a pas été visité, le sélecteur visité peut définir le style de lien qui a été visité et le sélecteur actif peut définir le style de lien activé. Les étudiants qui ne sont pas clairs peuvent se référer au Tutoriel vidéo CSS.

Utilisation 1 : Changer son propre style lorsque la souris passe sur le lien (connecter directement le style après le survol)

Description : Lorsque la souris passe sur le lien, la balise a La couleur de la police passe au rouge et la police devient plus grande Le code est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.aa{text-decoration: none;color: #000000;}
.aa:hover{color: red;font-size: 20px ;}
</style>
</head>
<body>
<a href="#" class="aa">欢迎大家来PHP中文网学习交流</a>
</body>
</html>

La première image est l'effet original, et la deuxième image est l'effet obtenu après. la souris passe dessus.

Exemple montrant comment utiliser le survol du sélecteur de pseudo-classe en CSS

Utilisation 2 : Utilisez le survol du sélecteur de pseudo-classe pour contrôler le style de ses éléments enfants (ajouter un espace après le survol) Puis changez le style de l'élément)

Description : Lorsque la souris passe sur le div, la couleur de ses sous-éléments passe au violet, la police s'agrandit, et une bordure rouge apparaît . Le code est le suivant :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.aa{text-decoration: none;color: #000000;}
			.box:hover .aa{color: purple;font-size: 30px ;border: 1px solid red;}
		</style>
	</head>
	<body>
		<div class="box">
			<a href="#" class="aa">望子成龙，望女成凤</a>
		</div>
	</body>
</html>

L'effet est le suivant :

Exemple montrant comment utiliser le survol du sélecteur de pseudo-classe en CSS

Utilisation 3 : Contrôler le style de ses éléments frères au survol de la souris (ajouter "après survol" +" puis changer le style de l'élément)

Description : Au passage de la souris, la couleur de fond de ses éléments frères devient jaune et la police devient plus grande. Le code est le suivant :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.aa{text-decoration: none;color: #000000;}
			.box1:hover + .box2{font-size: 30px ;background: yellow;}
		</style>
	</head>
	<body>
		<div class="box1">床前明月光</div>
		<div class="box2">疑是地上霜</div>
	</body>
</html>

Rendu :

Exemple montrant comment utiliser le survol du sélecteur de pseudo-classe en CSS

Ce qui précède présente comment utiliser. le sélecteur de pseudo-classe en CSS. Les débutants peuvent l'essayer par eux-mêmes pour voir si votre code peut produire l'effet, j'espère que cet article vous sera utile !

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!

Déclaration：

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

Article précédent：Explication détaillée de l'attribut box-ordinal-group de la position de présentation de la boîteArticle suivant：Explication détaillée de l'attribut box-ordinal-group de la position de présentation de la boîte

Articles Liés

Voir plus