我用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>
代码:<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>
解决方案 »
- 大家帮我看看我这个js表单验证怎么错了呢?点击没有反应,谢谢了
- 真没有人用过 dhATV(Ajax TreeView) V4.0吗
- js控制所有页面内<input type="text">的样式
- 求助各位高手,有个问题想问一下,谢谢大家帮个忙
- 100分求一个关于页面预加载的难题,
- 很简单的验证全是数字的js正则,看不出来哪里错了,不好意思,帮我看看
- 如何用javascript修改类样式表呢?
- 如何用JS在不同窗体间传递参数?
- 大侠们快来帮忙,很简单的问题,偶就是不知道!
- eval()中不能有return false;字符吗?有没有变通的办法?
- 求一个js字符串找相同值
- 求ifame框架操作父页面问题。
浏览器渲染的时候先加载下面这句话
.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;}
改成这样就可以了