默认情况下如果你想hover到一个元素上改变另外一个元素的CSS样式，被改变的元素必
须是被hover元素的子元素，但你现在container和wrap不是父子关系，而是兄弟关系，那
么你必须要这样设置了。
.container:hover +.wrap{
background: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hover的使用和隐藏盒子的特殊写法</title>
</head>
<body>
<style>
.w {
height: 300px;
background-color: #eee;
width: 990px;
margin: 0 auto;
position: relative;
}
.wrap {
position: absolute;
width: 0px;
height: 200px;
background-color: yellow;
overflow: hidden;
top: 0px;
left: 0px;
z-index: 999;
transition: width 0.3s;
}
.box {
/*position: absolute;*/
height: 180px;
margin-top: 5px;
width: 500px;
background-color: green;
}
.cfq {
height: 20px;
cursor: pointer;
width: 20px;
background-color: red;
position: absolute;
left: 600px;
}
.cfq:hover +.wrap {
width: 500px;
}
.son1,.son2 {
height: 150px;
margin-top: 10px;
width: 230px;
background-color: blue;
margin-left: 5px;
float: left;
}
.div1 {
height: 300px;
width: 400px;
border: 1px solid red;
float: left;
}
</style>
<div class="w">
<div class="cfq"></div> <!-- 触发器 -->
<div class="wrap"> <!-- 这个内容物存在的空间,改变宽的对象-->
<div class="box"> <!-- 容纳内容物盒子，会被遮盖隐藏 -->
<div class="son1"></div> <!-- 内容 -->
<div class="son2"></div>
</div>
</div>
<div class="div1"></div>
<div class="div1"></div>
</div>
</body>
</html>
