在写网站的页面时,我发现很多网站都有展示企业的其他社交工作,例如下载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>
结果为:
大家有兴趣可以尝试一下。