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 关注
- 4749 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消