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/