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