当li处于悬停或活动状态时更改ul背景

I have a list, and I need to change the background image of the UL when hovering over each child. I've done that using the code here (here I'm using color instead of background image).

我有一个列表,当我将鼠标悬停在每个孩子身上时,我需要更改UL的背景图像。我已经使用这里的代码完成了(这里我使用的是颜色而不是背景图像)。

Now, if I click on item 1 there's an 'active' class dynamically added to it as I'm taken to .page-1. Here I need the background to show the corresponding image (or yellow color, per the example). I tried CSS:

现在,如果我点击第1项,那么当我被带到.page-1时,会动态添加一个“活动”类。在这里,我需要背景来显示相应的图像(或黄色,根据示例)。我试过CSS:

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

But the color disappears as soon as I hover over the other items. I think I should use the .hasClass method, but I'm not good with jQuery so I can't completely figure it out.

但是当我将鼠标悬停在其他物品上时,颜色就会消失。我想我应该使用.hasClass方法,但我对jQuery并不擅长,所以我无法完全理解它。

Any help is much appreciated.

任何帮助深表感谢。

3 个解决方案

#1

You can use style and class attribute at the same time. The style attribute will override color of class attribute.

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

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

On hover event you just add class to #menu, on click event you just change style of #menu.

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

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

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

Here is example JSFiddle

这是JSFiddle的例子

#2

Now i think i have a solution for your problem...

现在我想我有一个解决你问题的方法......

create three different html files for item-1, item-2 and item-3 if you click on item 1....then change the inline style for ul in item-1 file to...

如果单击项目1,则为item-1,item-2和item-3创建三个不同的html文件....然后将item-1文件中的ul的内联样式更改为...

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

</ul>

if you want to do it with jquery

如果你想用jquery做

take three classes

上三节课

.item1background{
    background-color:yellow;  
 }
.item2background{
    background-color:gray;  
 }
.item1background{
    background-color:pink;  
 }

Now whenever somebody click on an item then we dynamically added one of the above class.

现在,只要有人点击某个项目,我们就会动态添加上述类之一。

$("#menu .item_1").click(function(){
    $("#menu").addClass("item1background");
});

same you can do for rest of iem's

同样你可以做其余的iem

you can learn more about addClass() method @ http://www.w3schools.com/jquery/jquery_css_classes.asp

你可以了解更多关于addClass()方法的信息@ http://www.w3schools.com/jquery/jquery_css_classes.asp

#3

In your comment you said that it will go to another page, then I believe you cannot get what you want just by changing the CSS background-color of your #menu using jQuery. Every manipulation that you did using jQuery will be removed when you refresh/reload your page, because your page simply reset everything back to its default state..

在你的评论中,你说它将转到另一个页面,然后我相信你不能通过使用jQuery更改#menu的CSS背景颜色来获得你想要的。刷新/重新加载页面时,将删除使用jQuery执行的每个操作,因为您的页面只是将所有内容重置为其默认状态。

The only solution that I can come up with is to use HTML5 LocalStorage to save your ul colour, like below:

我能想出的唯一解决方案是使用HTML5 LocalStorage来保存你的ul颜色,如下所示:

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

By doing so, everytime you reload your page you need to check your localStorage for the latest colour for your ul.

通过这样做,每次重新加载页面时,您需要检查localStorage以获取ul的最新颜色。

#1