Maison > Article > interface Web > 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:5810646parcourir
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;}".
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 :
(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!