Question

I have menu structure as show here.

All item have a background img. But when hover back, hide my menu item img. Because, js code isn’t valid this img but i don’t know how can i solve this.

I want, still javascript fade effect but don’t hide my img.

Normally:

Problem: (Hover and hover-out)

I want:

Answer 1

If what you want is to fade the background on hover, and restore it on hover-out, then use the following js:

$(document).ready(function(){
var bg;
$("#right_menu a").mouseover(function() {
    bg = $(this).css('background-color');
     $(this).animate({ backgroundColor:'#002C6A'},500);
}).mouseout(function() {
    $(this).animate({ backgroundColor:bg},500);
});       
});​

If you want to use image then change background-color to background.

In action: http://jsfiddle.net/3TDF3/2/

---

UPDATE: Just revisited code. Much of the problem is that css class is set on li, while modifications a being made on a

You are setting background-image to li, but animating a. Therefore the background of li gets hidden with new background of a.

Change $("#right_menu a").mouseover to $("#right_menu li").mouseover