如何在使用jQuery重置颜色后恢复我的悬停？

我有一个小小的jQuery代码，但有一件事我搞不清楚。单击infocontent菜单后，h1:hover消失了。如何恢复悬停功能

HTML:

jQuery：

$('.infocontent h1:first').css('color', '#000');

$(".infocontent h1").on("click", function() {
    $('.infocontent h1').css('color', '#999');
    $(this).css('color', '#000');
});

---

由于jQuery添加了内联CSS，所以覆盖它的唯一方法是通过

！重要信息

更新的CSS

.infocontent h1:hover {
    color: #000!important;
}

---

我建议避免使用

！重要信息

。您可以通过更改jQuery来添加/删除CSS类，而不是添加内联样式来实现这一点。

更改js来更改类可能更容易：

$('.infocontent h1').eq(0).addClass('on').end().on("click", function() {
    if(!$(this).hasClass('on')) {
        $('.on').removeClass('on'); 
        $(this).addClass('on');
    }
});

并将css更改为如下内容

编辑：看到您想要更改背景

.infocontent{float: left}

.infocontent h1 {
    text-transform: uppercase;
    color: #999999;
    /* opt changes */
    font-size: 18px;
    padding:3px 8px;
    letter-spacing:2px;
    cursor:pointer/*so users know to click it*/  
}

.infocontent h1.on,.infocontent h1.on:hover{color:#000000;background-color:#CCCCCC}
.infocontent h1:hover {color:#666666;background-color:#EDEDED}

---

我更新了你的提琴（现在有了bg更改）：

太糟糕了，infocontent div的背景色不起作用！重要的是增加。我可以使用[.on（“hover”func]或[.hover（）]，完全不需要css:hover来解决这个问题吗？@PascalGerritsen这是什么意思？它不工作。。它在这里工作h1:hover正在工作；），但我有一个非常类似的脚本来更改h1父级的背景颜色，并且当！h1中添加了重要信息。@PascalGerritsen不知道这一点。。你能给我举个例子吗？我会修好的，已经修好了，不过还是谢谢你！我在这里使用它就像一个符咒：）我更新了链接，添加了背景色支持，看到了你的评论。也做了一些可选的更改，似乎更有趣。谢谢，但我会坚持我的原始代码作为背景，尽管你的版本代码较少，因为自从我昨天开始使用jQuery以来，我需要花费一些时间来调整你的代码，使之符合我想要更改的方式：P我使用它的网站有一个例子：是的，把它放在上下文中看会更好，而且更有意义。

$('.infocontent h1').eq(0).addClass('on').end().on("click", function() {
    if(!$(this).hasClass('on')) {
        $('.on').removeClass('on'); 
        $(this).addClass('on');
    }
});

.infocontent{float: left}

.infocontent h1 {
    text-transform: uppercase;
    color: #999999;
    /* opt changes */
    font-size: 18px;
    padding:3px 8px;
    letter-spacing:2px;
    cursor:pointer/*so users know to click it*/  
}

.infocontent h1.on,.infocontent h1.on:hover{color:#000000;background-color:#CCCCCC}
.infocontent h1:hover {color:#666666;background-color:#EDEDED}