挺纠结的个问题、

//当我设定HOVER
.menu_head:hover{ background:url(../images/menu_fouce_03.jpg) no-repeat;} 并且在JS内写入   $("div.menu_head").click(function()
            {
                    $("div.menu_head").css("background","url(../images/menu_bg_03.gif) no-repeat");
                $(this).css("background","url(../images/menu_fouce_03.jpg) no-repeat");
            });HOVER事件只在第一次页面初始的时候有效果当我点击 .menu_head这个后 hover效果就不在出现了、还有就是当我设定      $(xxxx).hover(function() {
         $(this).css("background","url(../img/xxx.gif)");
},function() {
      $(this).css("background","})
$(xxxx).click(function() {
     $(this).css("background","url(../img/xxx.gif)");})
$(xxxx).click 将没有效果。这些都是什么原因呢有什么方法可以避免！！

解决方案 »

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

如果只是要实现hover是的背景改变，干嘛要写的这么复杂，用CSS就可以很简单的实现了，把你的目的说清楚了
$(this).css("background","url(../img/xxx.gif)");
路径是相对于你的网页文件
background:url(../images/menu_fouce_03.jpg) no-repeat;
这个路径是相对于你的CSS文件
我就是用CSS 实现了但是我点击了一次东西后  CSS 就无效了、
    $("div.menu_head").click(function()
    {
        $("div.menu_head").css("background","url(../images/menu_bg_03.gif) no-repeat");
        $(this).css("background","url(../images/menu_fouce_03.jpg) no-repeat");//mouse click
    });
    $("div.menu_head").hover(
            function () {
             $(this).css("background","url(../images/menu_fouce_03.gif) no-repeat");//mouse over
           },
           function () {
             $(this).css("background","url(../images/menu_bg_03.gif) no-repeat");//mouse leave
           }
     );
demo:<script type="text/jscript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
window.onload=function(){
    var obj;
    $("div.menu_head").click(function()
    {
        $("div.menu_head").css("background","red");
        $(this).css("background","green");
        obj=this;
    });
    $("div.menu_head").hover(
    function(){
        if(obj==this)return;
        $(this).css("background","blue");
    },function(){
        obj=null;
        $(this).css("background","red");
    });
}
</script>
<style>
    .menu_head { position:absolute;width:100px;height:100px;top:100px; background:red;}
    hover {background:blue;}
    #div1 { left:100px;}
    #div2 { left:201px;}
    #div3 { left:302px;}
</style>
<div class="menu_head" id=div1></div>
<div class="menu_head" id=div2></div>
<div class="menu_head" id=div3></div>
同样。。 $(this).css("background","green");  效果并没有保持住。。
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.main{
width:980px;
height:500px;
margin-left:auto;
margin-right:auto;
}
.list1{
height:20px;
list-style:none;
margin-left:20px;
}
.list1 li{
height:20px;
width:100px;
float:left;
margin-left:5px;
text-align:center;
}
.list1 li a:link,.list1 li a:visited{
display:block;
width:100px;
height:17px;
padding-top:3px;
background: #3366FF;
color:#fff;
font-size:12px;
}
.list1 li a:hover{
background:#FFCC00;
}
</style>
</head><body>
<div class="main">
<ul class="list1">
<li><a href="#" >菜单导航1</a></li>
<li><a href="#" >菜单导航1</a></li>
<li><a href="#" >菜单导航1</a></li>
<li><a href="#" >菜单导航1</a></li>
</ul>
</div>
</body>
</html>
用CSS简单实现的换背景代码，不知道你是不是要这样的效果，把background: #;换成你的图片就可以了！
这個效果？<script type="text/jscript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
window.onload=function(){
    var obj;
    $("div.menu_head").click(function()
    {
        $("div.menu_head").css("background","red");
        $(this).css("background","green");
        obj=this;
    });
    $("div.menu_head").hover(
    function(){
        $(this).css("background","blue");
    },function(){
        if(obj==this){
            $(this).css("background","green");
        }else{
            $(this).css("background","red");
        }
    });
}
</script>
<style>
    .menu_head { position:absolute;width:100px;height:100px;top:100px; background:red;}
    hover {background:blue;}
    #div1 { left:100px;}
    #div2 { left:201px;}
    #div3 { left:302px;}
</style>
<div class="menu_head" id=div1><a>aaaaaaaaaa</a></div>
<div class="menu_head" id=div2></div>
<div class="menu_head" id=div3></div>
换图片和换色一样的，把
.list1 li a:hover{
background:#FFCC00;
}
里的颜色换成图片就行了，如：
.list1 li a:hover{
background:url(../images/fk/fgb5.gif) no-repeat;
}
.list1 li a:link,.list1 li a:visited{
display:block;
width:100px;
height:17px;
padding-top:3px;
background: #3366FF;
color:#fff;
font-size:12px;
}
上面的要换成图片也是一样