CODEWITHSUNDEEP
jquerycsshover
Morten Repsdorph Husfeldt
Morten Repsdorph Husfeldt

Reputation: 1003

Jquery disables css hover effect

I have coded a small menu where a hover changes the color of the field the mouse is over. Hereafter, I change the css onclick via jquery.

However, the css hover-effect i hereafter not working. I would like to keep the hover effect active after the click.

The code: (see 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>

Upvotes: 1

Views: 902

Answers (1)

Kevin Bowersox
Kevin Bowersox

Reputation: 94469

Add an .active class that holds the style for an active div.

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

}

Then toggle this class with the 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/

Upvotes: 1

Related Questions