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

今日在防站过程中，看到目标站有鼠标滑过文字时显示隐藏的图片这种效果，第一感觉是通过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>