JQuery отключает эффект наложения css

Question

Я закодировал небольшое меню, в котором зависание изменяет цвет поля, над которым находится мышь. В дальнейшем я изменяю css onclick через jquery.

Однако, css hover-effect i hereafter не работает. Я бы хотел, чтобы эффект зависания был активным после нажатия.

Код: (см 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 класс, который содержит стиль для активных дел.

.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/