Question

我有这个小jQuery代码工作，但有一件事我无法弄清楚。单击我的infocontent菜单后，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

由于jQuery正在添加内联CSS，因此覆盖此内容的唯一方法 - 不幸的是 - 通过!important

更新了CSS

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

jsFiddle - it works.

我建议完全避免使用!important。您可以通过更改jQuery来添加/删除CSS类而不是添加内联样式来实现此目的。

Answer 2

可能更容易更改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）：http://jsfiddle.net/filever10/FXetb/18/

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

2 个答案: