bg color, hover, !important and .css in javascript

Question

I came across one problem. I've created some "tabs" functionality as can be seen in demo: http://jsfiddle.net/4FLCe/

The plan was, when you hover over tab, its color changes to color A, when you click on tab, its color changes to color B.

As can be seen from demo, after click background color stopped changing on hover. I thought of adding !important to background color of hover, results can be seen: http://jsfiddle.net/4FLCe/1/

But that performed not as I wanted, hover now would work over background color set from javascript. Then I added !important to color set in javascript. That resulted in something terrible. The only browser that understood what I wanted to achieve was Opera.

Other browsers just stopped applying one from js. Demo: http://jsfiddle.net/4FLCe/2/

So the question is: how to achieve next - working hover, background of selected tab have higher 'priority' than hover so it won't change to background of hover on hover, and same result in ie,safari, opera, chrome, ff?

Answer 1

You should use a class instead of setting it through the .css() method..

So create

.selected-tab{
    background-color:#d6d6d6!important;
}

and change your code to

$(function() {  
    $('.pagecontent').eq(0).show();
    $('.tab').click(function() {  
        $('.pagecontent').hide();
        $('.selected-tab').removeClass('selected-tab');
        $(this).addClass('selected-tab');
        $('.pagecontent').eq($(this).index()).show();
    });  
});

Demo at http://jsfiddle.net/gaby/4FLCe/3/