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

bo523 2010-01-09 01:00:08
使用DIV UL LI做一效果,鼠标没移上去LI的样式都是很普通的,当鼠标移上去之后就变成如下图的样式:

请问大家这个怎么做?谢谢了!!!
...全文
309 18 打赏 收藏 举报
写回复
18 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
浴火_凤凰 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>
HardGo 2010-01-09
  • 打赏
  • 举报
回复
可以肯定的是,ie/ff都可以实现。10楼正解,在div的onmouseover事件和onmouseout事件中分别写对div的样式进行控制的代码。
一弗楚 2010-01-09
  • 打赏
  • 举报
回复
代码贴出来,改改就行了
licip 2010-01-09
  • 打赏
  • 举报
回复
你先定义好样式,然后,用JAVASCRIPT事件中的ONMOUSEOVER去实现。
dom.className=c1
类似这种代码。
bo523 2010-01-09
  • 打赏
  • 举报
回复
这是我下的一个效果,它连都是用<P>标记写的,但是我想用DIV UL LI来实现这个效果
一弗楚 2010-01-09
  • 打赏
  • 举报
回复
这个你在哪截的图,看一下那个页面的源代码里的样式就行了
一弗楚 2010-01-09
  • 打赏
  • 举报
回复
用IE好像可以,我用的FF看不到图
bo523 2010-01-09
  • 打赏
  • 举报
回复
[Quote=引用 4 楼 ahywg 的回复:]
源代码里有图片链接,http://student.csdn.net/attachment/201001/9/64138_1263012762tAK2.jpg
但是打不开
[/Quote]

你直接的在地址栏里面就可以看到了!!!
bo523 2010-01-09
  • 打赏
  • 举报
回复
一弗楚 2010-01-09
  • 打赏
  • 举报
回复
源代码里有图片链接,http://student.csdn.net/attachment/201001/9/64138_1263012762tAK2.jpg
但是打不开
一弗楚 2010-01-09
  • 打赏
  • 举报
回复
[Quote=引用楼主 bo523 的回复:]
使用DIV UL LI做一效果,鼠标没移上去LI的样式都是很普通的,当鼠标移上去之后就变成如下图的样式:

请问大家这个怎么做?谢谢了!!!
[/Quote]

看不到哟
bo523 2010-01-09
  • 打赏
  • 举报
回复
看不到图吗?
一弗楚 2010-01-09
  • 打赏
  • 举报
回复
无图无真相
相关推荐
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2010-01-09 01:00
社区公告
暂无公告