鼠标移上LI变色背景的问题

我用JQuery做一个鼠标移上去li背景色改变的效果，但是我的li前面的图片也是用background填充的，这样我再用JQ引用新的CSS样式之后就没有前面的那个小图片了(鼠标移上去之后就没前面的小图片了)，请问该怎么改？就像上面的，鼠标移上去就没了前面的小图标了.......
代码：<script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $("#bb li").hover(
             function() { $(this).addClass("aa"); },
             function() { $(this).removeClass("aa"); }
           )
        })
    </script>
    <style type="text/css">
      .box{ width:250px; height:180px; border:1px solid #09F; margin:0 auto; font-size:12px;}
  .box ul{ margin:0px; padding:0px;}
  .box ul li{ list-style:none; height:25px; line-height:25px; text-indent:28px; background:url(ul_list.gif) no-repeat 10px;}
  a{ color:#09F; text-decoration:none;}
  a:hover{ color:#090; text-decoration:none;}
  .c{ background:#DAF2FE;}
 .box ul li.aa{ background:#CFF;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="box" id="bb">
        <ul>
          <li><a href="#">文字文字文字文字文字文字文字</a></li>
          <li><a href="#">文字文字文字文字文字文字文字</a></li>
          <li><a href="#">文字文字文字文字文字文字文字</a></li>
          <li><a href="#">文字文字文字文字文字文字文字</a></li>
          <li><a href="#">文字文字文字文字文字文字文字</a></li>
          <li><a href="#">文字文字文字文字文字文字文字</a></li>
          <li><a href="#">文字文字文字文字文字文字文字</a></li>
        </ul>
    </div>
    </form>
</body>

解决方案 »

  1.   


    浏览器渲染的时候先加载下面这句话
    .box ul li{ list-style:none; height:25px; line-height:25px; text-indent:28px; background:url(ul_list.gif) no-repeat 10px;}
    当鼠标经过的时候，下面这句话其作用，把上面的给覆盖了 ，所以上面的就没效果了，可以在下面加上背景
     function() { $(this).addClass("aa"); },
     .box ul li.aa{ background:#CFF;}
      

  2.   

    .box ul li.aa{ background:#CFF url(ul_list.gif) no-repeat 10px; }
    改成这样就可以了