Conflict between jQuery .css() and CSS hover property

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

thecodeparadox · Accepted Answer · 2012-05-23 18:28:05Z

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

Blazemonger · Accepted Answer · 2012-05-23 18:00:37Z

2

Try setting your :hover properties to !important, and they should override the inline styles.

Alternatively, if you don't like using !important, you could use .toggleClass() to add and remove a particular class, rather than changing the inline CSS styles directly.

answered May 23, 2012 at 18:00

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Comments

user400654 · Accepted Answer · 2012-05-23 18:03:17Z

0

Inline-styles override stylesheet styles. This is the expected behavior. Instead of setting the color back to default, remove the style attribute so that the stylsheet is back in control.

$('#nav-glob a').click(function(){
    var $this = $(this);
    $this.parent().siblings().children('a').removeAttr("style");
    $this.css("color", "red");
});

answered May 23, 2012 at 18:03

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Collectives™ on Stack Overflow

Conflict between jQuery .css() and CSS hover property

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related