Comment utiliser CSS pour couvrir une autre image lorsque la souris entre et sort ? (exemple)-tutoriel CSS-php.cn

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

藏色散人

Libérer： 2018-08-10 10:30:54

original

6279 Les gens l'ont consulté

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>

Copier après la connexion

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!