jquery - 当 li 处于悬停或事件状态时更改 ul 背景

Question

我有一个列表，当悬停在每个 child 上时，我需要更改 UL 的背景图像。我已经使用 the code here 做到了这一点(这里我使用的是颜色而不是背景图片)。

现在，如果我单击第 1 项，则会在我转到 .page-1 时动态添加一个“事件”类。在这里，我需要背景来显示相应的图像(或黄色，根据示例)。我试过 CSS:

.page-1 #menu {
    background-color: yellow;
}

但是当我将鼠标悬停在其他元素上时，颜色就会消失。我想我应该使用 .hasClass 方法，但我不擅长 jQuery，所以我无法完全弄明白。

非常感谢任何帮助。

Answer 1

您可以同时使用样式和类属性。样式属性将覆盖类属性的颜色。

<ul id="menu" style="background-color:yellow" class="pink">

在悬停事件上，您只需将类添加到#menu，在点击事件上，您只需更改#menu 的样式。

$('.item_1').hover(function() {
    $('#menu').addClass('yellow');
}, function() {
    $('#menu').removeClass('yellow');
});

$('.item_1').click(function() {
    $('#menu').css('background-color', 'yellow');
    return false;
});

这是例子 JSFiddle