【鼠标悬浮hover _hover 】 | IT修真院·坑乎
咨询电话 : 010-59478634
切换导航
首页
我的提问
我的回答
我的点赞
消息通知
个人主页
×
提示
尚未登陆，前往官网登陆？
×
提示
尚未登陆，前往官网登陆？
鼠标悬浮hover
我也踩过这个坑(
1
)
已统计您的踩坑,无需重复点击
回答(1)
hover
详细描述
如何使鼠标悬浮在一个盒子上时，其下方出现另一个盒子？
截图
使鼠标悬浮在水民的盒子上时，其下方出现另一个有四个小图标的盒子。
代码
第一种 .box2 { visibility: hidden; } .box1:hover .box2 { visibility: visible; } 第二种 .box2 { visibility: hidden; } .box1:hover~ .box2 { visibility: visible; }
有两种方法： 第一种：使两个盒子（box1,box2）都在另一个大的盒子(box)里，这时box1和box2是兄弟关系，使box2隐藏，隐藏有两种方法，display：none;和visibility:hidden；，display：none;使元素隐藏并且元素不占据原来位置，从文档中消失，它下边的元素会上移，visibility:hidden；使元素隐藏，它占据原来的空间，它还在原来的位置只是不显示，它下边的元素不会上移。设置.box2{visibility: hidden;}隐藏，之后让鼠标悬浮在box1时出现box2，设置.box1:hover~ .box2{visibility：visible}，这时鼠标放在box1上时就会出现box2。 第二种：使一个盒子（box1）包含另一个盒子(box2)，此时这两个盒子是父子关系，设置.box2{visibility: hidden;}隐藏，之后让鼠标悬浮在box1时出现box2，设置.box1:hover .box2{visibility：visible}，这时鼠标放在box1上时就会出现box2。 总结：当两个盒子是父子关系时设置.box2{visibility: hidden;} .box1:hover .box2{visibility：visible} 当两个盒子是兄弟关系时设置 .box2{visibility: hidden;} .box1:hover~ .box2{visibility：visible} 最主要的区别就是当两个盒子是兄弟关系时必须加这个~符号，否则没有效果。
编辑于2024-04-26
时间排序
热门排序
[上海|荣耀师兄]JS-五竹
1
.box2 {
display:none
}
.box1:hover .box2 {
display:block
}
注：此方法会导致文档流移动
查看全部>
编辑于2018-03-29
首页
1
末页
去第
页
确定
Copyright ©2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1
复制链接
新浪微博
微信扫一扫
261
0
10
鼠标悬浮hover
1
1
时间排序
