在悬停时删除我的图像

Question

我的菜单结构显示为here。

所有项目都有背景img。但是当悬停时，隐藏我的菜单项img。因为，js代码无效，这个img但我不知道如何解决这个问题。

我想，仍然是javascript淡入效果，但不要隐藏我的img。

通常：

问题:(悬停和悬停）

我想：

Answer 1

如果你想要的是在悬停时淡化背景，并在悬停时恢复它，那么使用以下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);
});       
});​

如果您想使用图像，请将背景颜色更改为背景。

行动中：http://jsfiddle.net/3TDF3/2/

---

更新：重新访问代码。很多问题是css类设置在 li 上，而修改是在 a

上进行的

您正在将背景图像设置为li，但设置动画a。因此，li的背景隐藏着一个新的背景。

将$("#right_menu a").mouseover更改为$("#right_menu li").mouseover

Answer 2

尝试使用背景色而不是图像。当鼠标悬停在链接上时，将背景颜色设置为上一个值。使用背景颜色似乎足够的图像看起来不错。

Answer 3

试试这个

$(document).ready(function(){
    var backgroundimage = $(this).css("background-image");//store it in a variable
    $("#right_menu a").mouseover(function() {
         $(this).animate({ backgroundColor:'#002C6A'},500);
        $(this).css("background-image","none");//remove it
    }).mouseout(function() {
        $(this).animate({ backgroundColor:'#fff'},500);
        $(this).css("background-image",backgroundimage );//bring it back
    });       
});​