Question

This is probably an easy solution but Im not getting it. So I have a one page site im working on a I have a jquery .click() function that changes the color of the navigation. I also have a .hover() function that also changes the color. The hover function works just fine until one of the navigation is clicked. Then the hover function stops working. here is my code

$(document).ready( function() {

$('nav a').click(function() {
$('nav a.lightGrey').css({color:'#888'});
$('nav a.darkGrey').css({color:'#555'});
$(this).css({color:'#0cf'});
});


$('nav a').hover(
function() {
$(this).addClass('hover')
},
function() {
    $(this).removeClass('hover')
}
);
});

Suggestions?

Answer 1

Your inline styles set by the css()^[docs] method override styles from classes, unless you give !important to a style in a class.