Maison > Article > interface Web > Comment CSS contrôle-t-il que l'image change lorsque la souris la survole ?
Comment CSS contrôle-t-il que l'image change lorsque la souris la survole ?
- 藏色散人original
- 2018-08-06 16:42:152349parcourir
Lorsque nous utilisons la souris pour naviguer sur le Web, nous sommes toujours attirés par les changements soudains d'images, ce qui améliore considérablement l'expérience utilisateur et apporte une plus grande efficacité. Cet article présente donc principalement comment utiliser CSS pour contrôler le changement d'image lorsque la souris est déplacée. Les amis dans le besoin peuvent s'y référer.
L'exemple de code spécifique permettant au CSS de contrôler la transformation de l'image lorsque la souris est déplacée est le suivant :
<style type="text/css">
.demo {
width:500px;
height:400px;
text-decoration:none;
display:block;
background-image:url(1.png);
background-position:0px 0;
background-repeat: no-repeat;
}
.demo:hover,.demo:active {
background-position:0 0;
background-image: url(2.png);
}</style>
</head>
<body>
<a href="http://www.php.cn" class="demo"> </a>
</body>
Remarque :
Le sélecteur CSS :hover est utilisé pour sélectionner l'élément sur lequel le pointeur de la souris survole et peut être utilisé sur tous les éléments, pas seulement sur les liens.
[Articles connexes recommandés]
Effet d'invite dynamique CSS3 lorsque la souris se déplace dans l'image
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!