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

Question

我可以使用这个小的 jQuery 代码，但有一件事我想不通。单击我的信息内容菜单后，h1:hover 消失了。如何恢复悬停功能？

HTML:

<div class="infocontent"><h1>Wat?</h1></div>
<div class="infocontent"><h1>Van/ voor wie?</h1></div>
<div class="infocontent"><h1>Akties</h1></div>
<div class="infocontent"><h1>Met wie?</h1></div>

CSS:

.infocontent {
    width: 120px;
    height: 120;
    float: left;
}

.infocontent h1 {
    width: 100%;
    font-size: 24px;
    text-transform: uppercase;
    color: #999;
}

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

jQuery:

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

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

Demo

Answer 1

可能更容易更改 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}

我更新了你的 fiddle (现在有 bg 更改):http://jsfiddle.net/filever10/FXetb/18/