Question

basically i have 3 links and i’ve used hover css property to make them white/red when user enter/leave link area:

<div id="nav-glob">
    <ul>
        <!--menu-->
        <li class="nav-home"><a href="#content">Home</a></li>
        <li class="nav-portfolio"><a href="#lavori">Portfolio</a></li>
        <li class="nav-contact"><a href="#footer">Contact</a></li>
    </ul>
</div>

.nav-glob a:hover {
    color: red;
}

Then in jQuery i’ve used click() function to set the css color property to red:

$('.nav-home > a').click(function(){
    $(".nav-home a").css("color", "red");
    $(".nav-contact a").css("color", "white");
    $(".nav-portfolio a").css("color", "white");
});

$('.nav-portfolio > a').click(function(){
    $(".nav-home a").css("color", "white");
    $(".nav-contact a").css("color", "white");
    $(".nav-portfolio a").css("color", "red");
});

$('.nav-contact > a').click(function(){
    $(".nav-home a").css("color", "white");
    $(".nav-contact a").css("color", "red");
    $(".nav-portfolio a").css("color", "white");
});

The problem is this is working fine the first time: after clicking one link the hover CSS property is ignored! It looks like that hover has been disabled after clicking. Any help is much appreciated, thanks

Answer 1

Try some CSS for differenct a tag states:

a.clicked {
    color: #f00;
}
a.hovered{
   color: #f00 !important;
}
a.faded {
    color: #fff
}


$('#nav-glob ul li a').hover(function() {
    $(this).parent().siblings('li').find('a').removeClass('hovered');
    $(this).addClass('hovered');
}, function() {
    $(this).parent().siblings('li').find('a').removeClass('hovered');
    $(this).removeClass('hovered');
}).click(function(e) {
    e.preventDefault();
    $('#nav-glob ul li a').removeClass('faded');
    $(this).parent().siblings('li').find('a').addClass('faded');
    $(this).addClass('clicked');
});

DEMO

or just as @Blazemonger said

a.faded {
    color: #fff
}
a.clicked {
    color: #f00;
}
a:hover{
   color: #f00 !important;
}

$('#nav-glob ul li a').click(function(e) {
    e.preventDefault();
    $('#nav-glob ul li a').removeClass('faded');
    $(this).parent().siblings('li').find('a').addClass('faded');
    $(this).addClass('clicked');
});

DEMO