问一个css :hover的基础问题

Question

html:

<li>
  <div class="box">
      看看
      <div class="red"></div>
  </div>
  <div class="blue"></div>
</li>

css:

li div.box dix.red{
   display:none;
   width:20px;
   height:30px;
   background-color:red;
}
li dix.blue{
   display:none;
   width:20px;
   height:30px;
   background-color:blue;
}
li div.box:hover div.red{
   display:block;
} 

现在的代码没有问题，如果我把最后的css修改为:

li div.box:hover div.blue{
   display:block;
}

这时候就没有反应了，:hover后面的语法有问题，在网上也没有这方面的介绍，请问需要如何写？

Answer 1

div.red 是 div.box的后代元素，才可以用css的后代选择器

div.box:hover div.red{
   ...
} 

div.blue 是 div.box的相邻兄弟元素，可以用相邻兄弟选择器

div.box:hover + div.blue{
   ...
}