在悬停时删除我的图像

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的背景会隐藏在a的新背景中。

将$("#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
    });       
});​