hover控制元素的显示和隐藏不生效

hover控制元素的显示和隐藏不生效

原因：点击的元素和需要显示隐藏的元素不属于一个父级元素，如果想要hover伪类生效的话，点击的元素和显示隐藏的元素需要属于同一个父级元素，例如。
html部分

<div class="box">
  <button class="top">显示div</button>
  <div class="bottom">我显示了</div>
</div>

CSS部分

.box{
width:200px;
}

.top{
width:100px;
height:50px;
background:blue;

.bottom{
display:none;/*先让div隐藏*/
width:100px;
height:100px;
color:white;
background:yellow;
}

.top:hover .bottom{
display:block;/*hover时显示div*/
}