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:152335parcourir

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>

Comment CSS contrôle-t-il que limage change lorsque la souris la survole ?

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

Explication détaillée du CSS pour atteindre l'objectif effet de rotation de l'icône lorsque la souris est déplacée vers le haut Méthode

JS et CSS3 Exemple d'implémentation de l'effet d'agrandissement du mouvement de la souris réactif à 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!

css css3 指针 JS 选择器

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：Comment obtenir l'effet de faire défiler une seule ligne de texte (code ci-joint)Article suivant：Comment obtenir l'effet de faire défiler une seule ligne de texte (code ci-joint)

Articles Liés

Voir plus