jQuery not changing the background

My html code is:

<ul class="nav">
        <li class="nav-one" ><span class="righttab activeright">&nbsp;</span><span class="lefttab activeleft">&nbsp;</span><a href="#featured" class="current">Featured</a></li>
        <li class="nav-two" ><span class="righttab" id="rightnav2">&nbsp;</span><span class="lefttab" id="leftnav2">&nbsp;</span><a href="#core" >Core</a></li>
        <li class="nav-three" ><span class="righttab" id="rightnav3">&nbsp;</span><span class="lefttab" id="leftnav3">&nbsp;</span><a href="#jquerytuts" >jQuery</a></li>
     开发者_StackOverflow中文版   <li class="nav-four last" ><span class="righttab" id="rightnav4">&nbsp;</span><span class="lefttab" id="leftnav4">&nbsp;</span><a href="#classics" >Classics</a></li>
</ul>

and my jQuery code is:

    jQuery(".nav-two").hover(function() { 
      $('#rightnav2').css("background-image", "url(/skin/frontend/unleaded/worldeffect/images/tabover1-right.jpg)");  
      $('#leftnav2').css("background-image", "url(/skin/frontend/unleaded/worldeffect/images/tabover1-left.jpg)"); 
    });

This is a supposed to change the background image when I rollover with my mouse. Can anyone tell me what I am doing wrong?

The most common usage of .hover is to pass two functions to it: the first for mouse enter and the second for mouse leave. If you pass just one function, as you have there, then it is executed for both events, and your handler should interrogate the Event object to decide what to do. So, if your intention was to have the background image change when you mouse over and then revert when you mouse out, then you should provide a second function setting the background image to ''.

   jQuery(".nav-two").hover(function() { 
      $('#rightnav2').css("backgroundImage", "url(/skin/frontend/unleaded/worldeffect/images/tabover1-right.jpg)");  
      $('#leftnav2').css("backgroundImage", "url(/skin/frontend/unleaded/worldeffect/images/tabover1-left.jpg)"); 
    });

You may need to replace all '-' in css attributes with the camel case equivalent.

ie. background-image becomes backgroundImage

Try creating a CSS class for each background

$(".nav-two").bind({
    mouseenter: function(){
       $('#leftnav2').addClass('hover1');
       $('#rightnav2').addClass('hover2');
    },
    mouseleave: function(){
       $('#leftnav2').removeClass('hover1');
       $('#rightnav2').removeClass('hover2');
    },
});

or

$(".nav-two").hover(
  function () {
           $('#leftnav2').addClass('hover1');
           $('#rightnav2').addClass('hover2');
  },
  function () {
           $('#leftnav2').removeClass('hover1');
           $('#rightnav2').removeClass('hover2');
  }
);