In my latest project, I have created a unique menu feature where the color of the field changes when hovering over it. I then used jQuery to dynamically change the CSS onclick.
However, I encountered an issue where the hover effect stopped working after the click event. I need to find a way to keep the hover effect active even after a user clicks on the field.
Here is the code: (view the code on jsfiddle: 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>