jquery 禁用 css 悬停效果

Question

我编写了一个小菜单，其中悬停会更改鼠标悬停的字段的颜色。此后，我通过 jquery 更改 css onclick。

但是，我此后的 css 悬停效果不起作用。我想在点击后保持悬停效果。

代码:(参见 jfiddle:http://jsfiddle.net/Cwmpf/)

.vbtn { color:#000B41; }
.vbtn:hover { background-color:#1A2040; color:white; cursor:pointer; }

<div id="overskrift1" class="vbtn" felt="1">Vare</div>
<div id="overskrift2" class="vbtn" felt="2">Guide</div>

<script type="text/javascript">
    $('div.vbtn').click( function() {
        $('div.vbtn').css({'background-color':'white','color':'#000B41'});
        $(this).css('background-color','#1A2040');
        $(this).css('color','white');
        felt = $(this).attr('felt');
        $('div.vniv').each(function() {
            if($(this).attr('felt') != felt) { $(this).css('display','none'); }
            else { $(this).css('display','block'); }
        });
    });
</script>

Answer 1

添加一个 .active 类来保存事件 div 的样式。

.active{
    background-color: #1A2040;
    color: white;

}

然后用JS切换这个类

$('div.vbtn').click( function() {
    $("div.vbtn").removeClass("active");
    $(this).addClass("active");
    felt = $(this).attr('felt');
    $('div.vniv').each(function() {
        if($(this).attr('felt') != felt) { $(this).css('display','none'); }
        else { $(this).css('display','block'); }
    });
});

JSFIDDLE: http://jsfiddle.net/Cwmpf/1/