Question

用Jquery如何改变鼠标移过去和移出来的背景图片？

页面加载默认是首页，如上图，当我鼠标移到产品中心的时候，产品中心背景变绿，首页变白；当我移开鼠标的时候，效果还原到原来的样子，怎么弄呢？
代码如下：
<table style="width:100%; border-collapse:collapse" id="tbNavi"> <tr> <td > </td> <td id="navi1" class="naviImg"><a href="index.aspx" target="_parent" id="aNavi1"></a> </td> <td id="navi2" class="naviImg"><a href="ProductCenter.aspx" target="_parent" id="aNavi2"></a> </td>
</table>

Answer 1

<style>
#tdNavi .navilmg{background:url(图片地址) 0 0 no-repeat;}
#tdNavi .on{background:url(图片地址) 0 0 no-repeat;}
</style>
<script>
$("#tdNavi .navilmg").hover(
function(){
$("#tdNavi .navilmg").removeClass("on");//先移去左右nav的绿色背景样式
$(this).addClass("on");//在在这个目录上加上绿色背景样式
}
);
</script>

你先在样式里写好li的背景，然后在写一个绿色的背景样式类，

鼠标划过的时候先移除所有这个class在在这个划过的li上添加这个class，就可以了。

当然你也可以把样式写在a标签上

Answer 2

$("#navi1").hover(function(){
$(this).css("background","url(图片地址1)");
},function(){
$(this).css("background","url(图片地址2)");
});
hover鼠标移出事件，里面定义了两个方法，没有测试过，你试试看。

Answer 3

#tbNavi a { background:...}
#tbNavi a:hover { background:...}