javascript - 悬停时擦除我的图像

Question

我有这里显示的菜单结构。

所有项目都有背景图片。但是当鼠标悬停时，隐藏我的菜单项 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 上进行了修改

您正在将 background-image 设置为 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
    });       
});​