Css实现鼠标滑过文字时显示隐藏的图片

太过爱你忘了你带给我的痛 2022-11-30 05:46 307阅读 0赞

今日在防站过程中，看到目标站有鼠标滑过文字时显示隐藏的图片这种效果，第一感觉是通过JS来实现的，但百度一下找到了完全用Css来实现的方法。

具体步骤如下：

1、鼠标滑过的文字与图片必须是在一个容器内，并且是容器盒子内相邻的元素。

2、需要将图片先进行隐藏。

3、设置文字滑过时hover+图片样式才让图片显示出来。

分享记录一下代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS实现鼠标滑过文字时显示隐藏的图片</title>
        <style>
            /*清除浏览器自带默认样式*/
            * {
                margin: 0;
                padding: 0;
            }
            /*设置容器盒子宽高及内边距*/
            .text-hover {
                width: 40rem;
                height: 20rem;
                padding: 2rem 10rem;
            }
            /*设置图片自适应及不显示的样式*/
            .img-hover {
                width: 100%;
                height: aotu;
                padding: 2rem 0;
                display: none;
            }
            /*设置h2文字鼠标滑过的样式*/
            h2:hover{
                color: red;
            }
            /*设置鼠标滑过h2标签的文字时显示图片*/
            h2:hover + .img-hover {
                display: block;
            }
        </style>
    </head>
    <body>
    <div class="text-hover">
        <h2>慢慢看漫画</h2>
        <img src="flash/1.jpg" class="img-hover" alt="">
    </div>
    </body>
    </html>