求一个鼠标移上去DIV中LI的效果

使用DIV UL LI做一效果，鼠标没移上去LI的样式都是很普通的，当鼠标移上去之后就变成如下图的样式：请问大家这个怎么做？谢谢了！！！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

源代码里有图片链接，http://student.csdn.net/attachment/201001/9/64138_1263012762tAK2.jpg
但是打不开
用IE好像可以，我用的FF看不到图
这是我下的一个效果，它连都是用<P>标记写的，但是我想用DIV UL LI来实现这个效果
你先定义好样式，然后，用JAVASCRIPT事件中的ONMOUSEOVER去实现。
dom.className=c1
类似这种代码。
可以肯定的是，ie/ff都可以实现。10楼正解，在div的onmouseover事件和onmouseout事件中分别写对div的样式进行控制的代码。
<style type="text/css">
#newslist a{color:#FF0000; width:350px; padding:5px; display:block; font-size:12px; position:relative;}
#newslist a:hover{border:1px solid #4785ac; background:#daf1ff; text-decoration:none;}
#newslist a span{position:absolute; right:5px;}
</style>
<div id="newslist">
    <a href="#">阿里西西，web开发之家！<span>[2009-09-28]</span></a>
    <a href="#">阿里西西，web开发之家！<span>[2009-09-28]</span></a>
</div>
大家看看我的代码：就是我设置的list-style-image:url(a.gif) 它不显示在我设置的鼠标以上去的方框里面： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" language="javascript" src="jquery-1.3.2-vsdoc.js"></script>
<script type="text/javascript" language="javascript">
    $(document).ready(function(){
  $(".box ul li").hover(
                function () {
                    $(this).addClass("box_li");   //鼠标经过时增加样式box_li
                },
                function () {
                    $(this).removeClass("box_li"); //鼠标离开时移除样式box_li
                }
            )
})
</script>
  <style type="text/css">
     .box{ width:250px; margin:0 auto; height:260px; border:1px solid #090; font-size:12px;}
.box ul{ margin:0px; padding:20px 0 0 0;}
.box ul li{ height:25px; line-height:25px; list-style:none; margin-left:20px; list-style-image:url(a.gif);}
.box_li{height:25px; line-height:25px; list-style:none; border:1px solid #090; background:#3FF;}
  </style>
</head><body>
    <div class="box">
        <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>
           <li><a href="#">文字文字文字文字</a></li>
           <li><a href="#">文字文字文字文字</a></li>
        </ul>
    </div>
</body>
</html>
<style type="text/css">
#newslist{list-style:none; padding:0; margin:0;}
#newslist a{color:#FF0000; width:350px; padding:5px; display:block; font-size:12px; position:relative; text-decoration:none;}
#newslist a:hover{border:1px solid #4785ac; background:#daf1ff;}
#newslist a span{position:absolute; right:5px;}
</style>
<ul id="newslist">
    <li><a href="#">阿里西西，web开发之家！<span>[2009-09-28]</span></a></li>
    <li><a href="#">阿里西西，web开发之家！<span>[2009-09-28]</span></a></li>
</ul>
这样写不行吗
加一个list-style-image之后，那个小图片就不在方框里面了！
<style type="text/css">
#newslist{list-style:none; padding:0; margin:0;}
#newslist a{color:#FF0000; width:350px; padding:5px; display:block; font-size:12px; position:relative; text-decoration:none;}
#newslist a:hover{border:1px solid #4785ac; background:#daf1ff url(http://preview.zcool.com.cn/pic/gif/gif_43/01/arrow_004.gif) no-repeat 7px center; padding-left:20px;}
#newslist a span{position:absolute; right:5px;}
</style>
<ul id="newslist">
    <li><a href="#">阿里西西，web开发之家！<span>[2009-09-28]</span></a></li>
    <li><a href="#">阿里西西，web开发之家！<span>[2009-09-28]</span></a></li>
</ul>
加个小图片也不难吧