En CSS, vous pouvez utiliser le sélecteur ":hover" et l'attribut opacity pour afficher ou masquer l'élément div lorsque la souris s'y déplace. La syntaxe est "div:hover{opacity:0}" ou "div:hover". {opacité:1}".
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
css3 Comment réaliser l'effet d'affichage et de masquage du div lorsque la souris se déplace vers le div
1 Déplacez la souris vers le div pour afficher le div
Vous pouvez utiliser le sélecteur :hover et l'opacité. attribut pour réaliser l'effet d'affichage du div lorsque la souris se déplace vers le div. L'exemple est le suivant :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> div{ width: 380px; height: 250px; background-image: url(1118.02.png); opacity: 0; } div:hover{ width: 380px; height: 250px; background-image: url(1118.02.png); opacity: 1; } </style> </head> <body> <div>鼠标移动到div上</div> </body> </html>
Résultat de sortie :
2. Déplacez la souris vers un div pour masquer le div
Vous pouvez. utilisez toujours le sélecteur :hover et l'attribut opacity pour obtenir l'effet de déplacer la souris vers un div pour afficher le div. L'exemple est le suivant :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> div{ width: 380px; height: 250px; background-image: url(1118.02.png); } div:hover{ opacity: 0; } </style> </head> <body> <div>鼠标移动到div上</div> </body> </html>
Résultat de sortie :
(Partage de vidéo d'apprentissage : css video. tutoriel)
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!