获取当前背景颜色并在.hover之后重置它？

Question

使用.hover更改菜单上的背景。所有背景在菜单中都不是同一种颜色，所以当用户悬停时，我希望背景颜色返回到初始颜色。 （我希望它读取当前背景，然后在悬停后重置它。）

下面是我所拥有但它不起作用。我不知道如何让悬停脚本的第二部分接受背景颜色的变量。

$('#dmenu ul li a').hover(

    function() { 
var bgOn = $(this).css('background-color'); 
    $(this).css('background-color', '#efefef'); 
}, 
    function() { 
    $(this).css('background-color', (bgOn); 
} 
); 

与JQuery不一样，所以我相信这很简单。谢谢

Answer 1

试试这个：

var bgOn; 
$('#dmenu ul li a').hover(

    function() { 
    bgOn = $(this).css('background-color'); 
    $(this).css('background-color', '#efefef'); 
}, 
    function() { 
    $(this).css('background-color', bgOn); 
} 
); 

在你的榜样bgOn会超出范围。

Answer 2

你可以尝试mouseenter和mouseleave事件来改变背景颜色。

您也可以使用CSS像下面

ul li a:hover 
{ 
    //set background color 
} 

Answer 3

为此，您可以用CSS

example jsfiddle

HTML做到这一点：

<ul id="menu"> 
    <li><a id="home" href="#">Home</a></li> 
    <li><a id="products" href="#">Products</a></li> 
    <li><a id="services" href="#">Services</a></li> 
    <li><a id="about" href="#">About</a></li> 
</ul> 

CSS：

#menu {margin:0;padding:0;font-family:Helvetica,Arial,sans-serif;font-size:16px;color:#fff;text-shadow:1px 1px 2px #888} 
#menu li {float:left;} 
#menu a {display:block;padding:15px 35px;color:#fff} 
#menu a:hover {background-color:#efefef;color:#888;text-shadow:1px 1px 2px #fff} 
#home {background-color:red;} 
#products {background-color:orange;} 
#services {background-color:green;} 
#about {background-color:blue;} 

Answer 4

尝试类似这样的操作，它将悬停时的data-background-color-orig属性设置为原始背景颜色，而回调只是使用该属性恢复原始背景颜色。

http://jsfiddle.net/gjsDq/7/

我已经做了，在过去与此类似，当两个被动态生成，并从背景颜色的元素，考虑到缺乏内嵌hover样式的支持。

相关JS：

$('#dmenu ul li a').hover(function() { 
    $(this).attr('data-background-color-orig', $(this).css('background-color')); 
    $(this).css('background-color', '#EFEFEF'); 
}, function() { 
    $(this).css('background-color', $(this).attr('data-background-color-orig')); 
});