Maison >interface Web >tutoriel CSS >Comment obtenir l'effet d'affichage et de masquage lorsque la souris passe par CSS

Comment obtenir l'effet d'affichage et de masquage lorsque la souris passe par CSS

青灯夜游
青灯夜游original
2021-11-09 17:22:5810694parcourir

Méthode d'implémentation : 1. Ajoutez le style "display: none;" à l'élément pour masquer l'élément en premier ; 2. Utilisez le sélecteur ":hover" et le style "display:block;" en passant, la syntaxe "parent" Element:hover element {display:block;}".

Comment obtenir l'effet d'affichage et de masquage lorsque la souris passe par CSS

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

css pour réaliser l'affichage du survol et laisser un effet caché

Idée d'implémentation :

  • Cachez d'abord l'élément

  • Ensuite, utilisez le sélecteur ":hover" pour définir le style de survol de la souris - élément d'affichage

     ;

Code d'implémentation :

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 520px;
				height: 50px;
				background-color: #008000;
				
			}
			span{
				color: azure;
				display: none;
			}
			div:hover span{
				display:block;
			}
		</style>
	</head>
	<body>
		<div>
			<span>hello</span>
		</div>
	</body>
</html>

Rendu :

Comment obtenir leffet daffichage et de masquage lorsque la souris passe par CSS

(Partage vidéo d'apprentissage : Tutoriel vidéo 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!

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