Maison > Article > interface Web > Comment utiliser CSS pour couvrir une autre image lorsque la souris entre et sort ? (exemple)

Comment utiliser CSS pour couvrir une autre image lorsque la souris entre et sort ? (exemple)

藏色散人original: 2018-08-10 10:30:546239parcourir

Lorsque nous concevons un site Web, si nous rencontrons une exigence selon laquelle lorsque la souris entre et sort d'une certaine image, elle doit automatiquement couvrir une autre image. En fait, les amis qui connaissent un peu le code CSS savent qu'il s'agit d'une opération très simple. Même un novice peut facilement comprendre les points de connaissances grâce à l'introduction de cet article. Aujourd'hui, je vais donc vous donner une introduction détaillée à la fonction d'effets spéciaux consistant à couvrir une certaine image dans le style de passage de souris CSS.

La souris CSS entre et sort d'un exemple de code spécifique pour couvrir une autre image :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css鼠标经过样式测试</title>
</head>
<body>
<div class="div">
    <div class="img1 img">
        <img  src="1.png" alt="Comment utiliser CSS pour couvrir une autre image lorsque la souris entre et sort ? (exemple)" >
    </div>
    <div class="img2 img">
        <img  src="2.png" alt="Comment utiliser CSS pour couvrir une autre image lorsque la souris entre et sort ? (exemple)" >
    </div>
</div>
<style>
    .div{position:relative; width:800px; margin:auto;}
    .img{position:absolute; z-index:0;}
    .img2{left:150px; top:100px;}
    .img1:hover{z-index:1;}
</style>
</body>
</html>

L'effet ci-dessus est tel qu'indiqué ci-dessous :

1 . Vient d'être ouvert La page affiche :

Comment utiliser CSS pour couvrir une autre image lorsque la souris entre et sort ? (exemple)

2. Lorsque la souris CSS est déplacée, elle couvrira une autre page :

Comment utiliser CSS pour couvrir une autre image lorsque la souris entre et sort ? (exemple)

En fait, la clé de cet article est d'utiliser la pseudo-classe hover. Ici, je vais également vous donner une brève introduction à la définition et à l'utilisation de css:hover. La pseudo-classe

:hover ajoute des styles spéciaux à cet élément lorsque la souris passe dessus. Cette pseudo-classe applique des éléments qui sont dans un « état de survol ». Le survol est défini comme lorsque l'utilisateur indique un élément mais ne l'active pas. L'exemple le plus courant consiste à déplacer le pointeur de la souris dans les limites d'un lien hypertexte dans un document HTML. En théorie, d'autres éléments pourraient être survolés, mais CSS ne définit pas lesquels.

Remarque : tous les principaux navigateurs prennent en charge la pseudo-classe :hover.

J'espère que cet article sera utile aux amis dans le besoin !

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!

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：Qu’est-ce que la transition CSS ? Une brève introduction aux éléments de transition en CSSArticle suivant：Qu’est-ce que la transition CSS ? Une brève introduction aux éléments de transition en CSS

Articles Liés

Voir plus