在写网站的页面时，我发现很多网站都有展示企业的其他社交工作，例如下载APP的下载码，官方微信和微博等。这些图片的展示基本都是通过hover来实现的。
例如：
hover改变其他元素状态，可以分为两种情况：
改变本身的子元素（最常见，好解决）改变本身的兄弟元素（不常见）
我通过一个例子解释一下这两种情况
控制子元素时，我们直接用后代选择器
.class1{position: relative;margin-bottom: 200px;}
.class1>.class2{position:absolute;top:30px;left:50px;width:100px;height: 100px;display: none;}
.class1:hover .class2{ display:block; }
.class1>div>img{width:100px;height: 100px;}
<div class="class1">关注我们
<div class="class2">
<img src="code.png">
</div>
结果为：
控制兄弟元素时，要使用兄弟选择器，如果控制相邻元素，使用相邻元素选择器即可。
.class3{position: relative;}
.class4{position:absolute;top:30px;left:50px;width:100px;height: 100px;display: none;}
.class4>img{width:100px;height: 100px;}
.class3:hover ~ .class4{display:block;} 使用兄弟选择器
<div class="class3">加入我们</div>
<div class="class4"><img src="download.png"></div>
结果为：
大家有兴趣可以尝试一下。
