Question

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

以下是我所拥有的，但它不起作用。我不知道如何让悬停脚本的第二部分接受变量为background-color。

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

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

不是JQuery的wiz，所以我确信这很简单。感谢

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

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

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

过去，当动态生成元素的to和from颜色时，我已经做了类似的事情，以解释对内联悬停样式缺乏支持。

相关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'));
});

Answer 3

您可以尝试使用mouseenter和mouseleave事件来更改背景颜色。

您也可以使用下面的css来完成

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

Answer 4

您可以使用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;}

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

4 个答案: