recherche

Maison >interface Web >tutoriel CSS >Comment utiliser CSS pour modifier l'effet de l'image lorsque la souris glisse dessus

Comment utiliser CSS pour modifier l'effet de l'image lorsque la souris glisse dessus

WBOY
WBOYoriginal
2021-12-08 09:49:437945parcourir

En CSS, vous pouvez utiliser le sélecteur ":hover" et l'attribut "background-image" pour obtenir l'effet de changer l'image en faisant glisser la souris dessus. Il vous suffit d'ajouter l'élément "image :hover{background". -image:url(new image) à l'élément image Path);" le style est suffisant.

Comment utiliser CSS pour modifier l'effet de l'image lorsque la souris glisse dessus

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

Comment obtenir l'effet de changement d'image en faisant glisser la souris sur css

En css, si vous souhaitez obtenir l'effet de changement d'image en faisant glisser la souris sur, vous devez toujours utiliser le :hover sélecteur et l'attribut background-image.

Parmi eux : le sélecteur de survol est utilisé pour sélectionner l'état lorsque la souris est survolée et définir le style, et l'attribut background-image est utilisé pour définir l'image d'arrière-plan de l'élément.

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{
               width: 380px;
                height: 250px;
                background-image: url(1118.01.png);
            }
        </style>
    </head>
    <body>
        <div>鼠标移动到图片上</div>
    </body>
</html>

Résultat de sortie :

Comment utiliser CSS pour modifier leffet de limage lorsque la souris glisse dessus

(Partage de vidéos 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!

html5 css css3 选择器 background
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 rendre le niveau d'élément le plus élevé en CSSArticle suivant：Comment rendre le niveau d'élément le plus élevé en CSS

Articles Liés

Voir plus