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

bo523 2010-01-09 01:00:08

使用DIV UL LI做一效果，鼠标没移上去LI的样式都是很普通的，当鼠标移上去之后就变成如下图的样式：

请问大家这个怎么做？谢谢了！！！

...全文

330 18 打赏收藏转发到动态举报

写回复

用AI写文章

18 条回复

切换为时间正序

请发表友善的回复…

发表回复

浴火_凤凰 2010-01-10

打赏
举报

没有那么复杂吧!就是一个背景颜色啊

TeamWei 2010-01-10

打赏
举报



<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>

加个小图片也不难吧

bo523 2010-01-10

打赏
举报

加一个list-style-image之后，那个小图片就不在方框里面了！

TeamWei 2010-01-10

打赏
举报



<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>

这样写不行吗

bo523 2010-01-10

打赏
举报

大家看看我的代码：就是我设置的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>

TeamWei 2010-01-09

打赏
举报



<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>