我有一个列表，当鼠标悬停在每个孩子上时，我需要更改 UL 的背景图片。我已经使用the code here 完成了这项工作（这里我使用颜色而不是背景图片）。
现在，如果我单击第 1 项，则会在转到 .page-1 时动态添加一个“活动”类。在这里，我需要背景来显示相应的图像（或黄色，根据示例）。我试过 CSS：
.page-1 #menu {
background-color: yellow;
}
但是，当我将鼠标悬停在其他项目上时，颜色就会消失。我想我应该使用.hasClass 方法，但是我不擅长使用jQuery，所以我无法完全弄清楚。
非常感谢任何帮助。
【问题讨论】：
标签： jquery css background
在您的评论中您说它将转到另一个页面，那么我相信您无法仅通过使用 jQuery 更改 #menu 的 CSS background-color 来获得所需的内容。当您刷新/重新加载页面时，您使用 jQuery 所做的所有操作都将被删除，因为您的页面只是将所有内容重置为默认状态..
我能想出的唯一解决方案是使用HTML5 LocalStorage 来保存您的ul 颜色，如下所示：
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
通过这样做，每次重新加载页面时，您都需要检查 localStorage 以获取 ul 的最新颜色。
【讨论】：
你可以同时使用 style 和 class 属性。 style 属性会覆盖 class 属性的颜色。
<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
【讨论】：
现在我想我有办法解决你的问题了……
为 item-1、item-2 和 item-3 创建三个不同的 html 文件
如果您单击第 1 项....然后将第 1 项文件中 ul 的内联样式更改为...
<ul id="menu" style="background-color:yellow">
</ul>
如果你想用 jquery 来做
上三门课
.item1background{
background-color:yellow;
}
.item2background{
background-color:gray;
}
.item1background{
background-color:pink;
}
现在每当有人点击一个项目时，我们就会动态添加上述类之一。
$("#menu .item_1").click(function(){
$("#menu").addClass("item1background");
});
对于其他 iem 也可以这样做
你可以了解更多addClass()方法@http://www.w3schools.com/jquery/jquery_css_classes.asp
【讨论】：