How can i change the background image of a list item

Question

I want to change my <Li> bgImage onMouseOver using jQuery

But image is in three div tags

Answer 1

Something like this:

$('li').mouseover(
  function(){
    $(this).css('background-image', 'url(hover.png) no-repeat top left');
  },
  function(){
    $(this).css('background-image', 'url(normal.png) no-repeat top left');
  }
);

Answer 2

I would like to know why you need to change the background image of a list item on mouse over.

If you want that the list item act like a link - or, in general, if you want assign an action to the list item - you should add an <a> tag inside the <li>, and use the a:hover css selector to assign the background image of the link on mouse over. In this way you don't need any javascript function.

If you can't use an <a> tag I would like to know why.

Answer 3

Instead of adding/removing a background image with CSS, you should add/remove class on hover. This way you can compress your JS file when you release it in the wild :)

However, i guess he wants to save current background image, replace it on mouse over and revert it back on mouse out :)