时间戳

首页 > 解决方案 > 触摸另一张图片时更改图像的位置 CSS

css - 触摸另一张图片时更改图像的位置 CSS

问题描述

当您将鼠标悬停在背景上时，我想将 person1 的图像切换为 person2 的图像。我试图从 2 张图片中切换“右下”代码，但我不知道该怎么做，过去一个小时我一直在搜索谷歌。

触摸一个元素时如何更改另一个元素？

这是我当前的代码

.background
    {
        z-index: 1;
    }
    
    .person1
    {
        position: relative;
        z-index: 2;
        right: 251px;
        bottom: 169px;
    }
    
    .person2
    {
        position: relative;
        z-index: 2;
        right: 749px;
        bottom: 221px;
    }
<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
            <link href="assets-css/heads.css" rel="stylesheet" type="text/css">
        </head>
        <body>
            <img src="assets-css/images/background.png" alt="background" class="background">
            <img src="assets-css/images/person1.png" alt="personright" class="person1">
            <img src="assets-css/images/person2.png" alt="personleft" class="person2">        
    
        </body>
    </html>

标签： css

解决方案

推荐阅读