小码菜 2022-05-23 02:01 采纳率: 100%
浏览 91
已结题

如何实现鼠标经过图片时，另一张图片从左向右滑出，鼠标移开，图片恢复原样？(标签-CSS|关键词-for)

比较急，主要需求:用before和after伪类，hover来完成，别超过CSS的知识范围，希望发下所有的代码，非常感谢！我是个菜菜 搞了好久，都没成功😓

img


下面这两张是制作的素材 他们的背景色都是白的，看不到，但是点下就能看到了

img

img

感谢！
如果看不到那两张图片的话 我把截图发出来比较明显

img

img

  • 写回答

3条回答 默认 最新

  • web修理工 2022-05-23 10:52
    关注
    

<!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>
    <style>
        .content {
            width: 100px;
            height: 100px;
            background-image: url('https://img-mid.csdnimg.cn/release/static/image/mid/ask/886398172356190.jpg?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit');
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;

        }

        .content::after {
            content: "";
            position: absolute;
            left: -100%;
            top: 0;
            width: 100px;
            height: 100px;
            background-image: url('https://img-mid.csdnimg.cn/release/static/image/mid/ask/886398172356190.jpg?x-oss-process=image/auto-orient,1/resize,w_320,m_lfit');
            background-repeat: no-repeat;
            background-size: cover;
            transition: all 0.5s linear;
        }

        .content:hover::after {
            left: 0;
        }
    </style>
</head>

<body>
    <div class="content ">


    </div>
</body>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 5月24日
  • 已采纳回答 5月23日
  • 修改了问题 5月23日
  • 修改了问题 5月23日
  • 展开全部

悬赏问题

  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 对于相关问题的求解与代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料
  • ¥15 使用R语言marginaleffects包进行边际效应图绘制