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