1

我有这个小 jQuery 代码工作，但有一件事我不知道。在我点击了我的 infocontent-menu 后，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');
});

演示

4

2 回答 2

1

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

更新的 CSS

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

jsFiddle - 它的工作原理。

我建议!important完全避免使用。您可以通过更改 jQuery 来添加/删除 CSS 类而不是添加内联样式来做到这一点。

于 2013-10-22T23:27:24.113 回答
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}

我更新了你的小提琴（现在有 bg 更改）：http: //jsfiddle.net/filever10/FXetb/18/

于 2013-10-22T23:48:13.363 回答