问一个css :hover的基础问题

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后面的语法有问题，在网上也没有这方面的介绍，请问需要如何写？