11 回答
已采纳
ChinaCJM
TA贡献44条经验 获得超84个赞
.wrap:hover表示的是当鼠标移动到wrap上面的时候wrap的样式变化。
.wrap:hover .box表示的是当鼠标移动到wrap上面的时候box的样式变化
weibo_哆啦A梦有大口袋_0
TA贡献107条经验 获得超146个赞
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.wrap{width: 100px;margin: 0 auto;}
.box1{width: 100%;height: 100px;background: #ccc;}
.box2{width: 100%;height: 100px;background: #666;}
/*当移入父元素wrap的时候,它下面的子元素box1,box2背景颜色改变,这里的空格表示后面的元素为子元素*/
.wrap:hover .box1{background: #666;}
.wrap:hover .box2{background: #ccc;}
</style>
</head>
<body>
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
leon66
TA贡献3条经验 获得超2个赞
不加空格 才奇怪呢 ; 加了空格后 就很明白 当wrap 当 hover 后,子元素 box 产生如下效果{ 。。。。}
PS;看你第一行代码时一惊,这是神马东西,吓的我感觉百度了好几下呢。。。
qq_Material_0
TA贡献1条经验 获得超0个赞
hover前面有空格和没有空格有不一样的效果,:hover前面没有空格,影响的只是该元素的兄弟节点;但是,如果前面有了一个空格,那效果就大大不一样了,有个空格影响的就是 该元素下面的子节点了。
- 11 回答
- 2 关注
- 4804 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消
