views:

959

answers:

3

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

But image is in three div tags

+5  A: 

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');
  }
);
quark
@quark: don't you mean $('li').hover in your example? I don't think the .mouseover event takes two callbacks..
elo80ka
First function is triggered when the mouse pointer moves into a <li> element and sets the hover image.Second one is triggered when mouse leaves <li> element and reverts image to normal state.If you use .hover() then you'll not be able to change image back.
quark
+2  A: 

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.

alexmeia
A: 

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 :)

Ionut Staicu