请教一个js（jquery）控制导航样式的问题

Question

代码如下<ul>
 <li><a href='#'>1</a></li>
 <li><a href='#'>2</a></li>
 <li><a href='#'>3</a></li>
 <li><a href='#'>4</a></li>
</ul>
默认链接1的css样式是有背景的，其链接的都没有背景，然后鼠标放在哪个链接上面，哪个链接就有背景，其他的链接背景消失。
使用jquery的mouseover 和 mouseout 可以实现，但是我想在在鼠标离开整个导航的时候，让导航还原到初始状态，及链接1有背景，其他的链接都没有背景，这个怎么做呢？我尝试了几种方法都不行，请高手帮帮忙吧，谢谢。

Answer 1

你在ul的mouseout中实现还不行吗？

Answer 2

如果再ul的mouseout中实现的话，鼠标移动时碰到li也相当于离开了ul，出现的效果很不协调啊

Answer 3

只要用CSS就可以了。很典型的HOVER伪类的应用。楼主不会没学过CSS吧。

Answer 4

要说学css，还真没学过，就是一边用一边百度。如果用hover,那么最后鼠标离开ul之后，怎么还原回初始的样子，让第一个链接加上背景。大侠能给个代码例子么？

Answer 5

很简单  假设 
<ul>
 <li><a href='#'>1</a></li>
 <li><a href='#'>2</a></li>
 <li><a href='#'>3</a></li>
 <li><a href='#'>4</a></li>
</ul>代码
     $(function () {          $("ul li").eq(2).css("background", "blue");
          $("ul li").mousemove(function () {
              $("ul li").css("background", "");
              $(this).css("background", "blue");          });          $("ul").css("border", "1px solid red");
          $("ul").mouseout(function () {
              $("ul li").css("background", "");              $("ul li").eq(2).css("background", "blue");          });
      })
效果就不给图了