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

6177 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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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