hover state background color lost after javascript script execution

Question

The original jquery:

$('#container section').each(function() {
                $(this).waypoint(function(direction) {
                    var anchorRef = 'a[href="#' + this.id + '"]';
                    if (direction === 'down') {
                        $(anchorRef).animate({'backgroundColor' : 'rgb(230, 77, 78)'});
                    } else {
                        $(anchorRef).animate({'backgroundColor' : 'rgb(25, 25, 25)'});
                    }
                });
            });

The CSS:

.main-menu ul li a:hover {
    background-color: #333;
}

The problem is that, once that animation finishes, if we return to that element, the hover effect doesn't get applied any longer.

Any clue why?

I've tried to "force" the overstate on the script like this:

$('#container section').each(function() {
                $(this).waypoint(function(direction) {
                    var anchorRef = 'a[href="#' + this.id + '"]';
                    var anchorRefHover = 'a[href="#' + this.id + '"]:hover';//NEW
                    if (direction === 'down') {
                        $(anchorRef).animate({'backgroundColor' : 'rgb(230, 77, 78)'});
                        $(anchorRefHover).css({backgroundColor : '#333'});//NEW
                    } else {
                        $(anchorRef).animate({'backgroundColor' : 'rgb(25, 25, 25)'});
                        $(anchorRefHover).css({backgroundColor : '#333'});//NEW
                    }
                });
            });

Still lost the hover effect market on the CSS.

I added !important on the CSS hover rule. That triggers the hover. But the reason while I prefer doing it using javascript its because, the hover background color should only apply if the element we have hover doesn't have the background rgb(230, 77, 78)

Not sure if it will work, but I'm thinking about adding !important via javascript when the above is the case... but perhaps there's a better way?

Any clue to help me out?

Note: Here's the Fiddle thanks to koala_dev efford:

http://jsfiddle.net/talofo/5YgY5/5/

How about using CSS transitions for the change in background that you can control by adding/removing a class, then you can modify your CSS accordingly to only apply the rule when the class is not there — omma2289
– omma2289, Commented Jul 27, 2013 at 17:35
I'd go with transitions. jQuery animations use inline styles on the element to achieve their effects. Inline styles have higher specificity than any other css, so they override your classes — Dom Day
– Dom Day, Commented Jul 27, 2013 at 17:48
hmm. As an alternative, you could add the class normal to the element, and trigger the hover on that class. Then you toggle that class after animation. eg .main-menu ul li a.normal:hover { background-color: #333; } and $(anchorRef).toggleClass('normal'); — Dom Day
– Dom Day, Commented Jul 27, 2013 at 18:15
Here's a working fiddle that reproduces the problem jsfiddle.net/5YgY5/4 — omma2289
– omma2289, Commented Jul 27, 2013 at 18:17

omma2289 · Accepted Answer · 2013-07-27 18:26:06Z

3

As @DomDay noted in the comment, jQuery .animate() uses inline styles that override your CSS rules, so one solution would be to remove the inline statement when you revert the color to the original one like this:

$(anchorRef).animate({'backgroundColor': 'rgb(25, 25, 25)'},function(){
    $(this).removeAttr('style');
});

Working fiddle

answered Jul 27, 2013 at 18:26

omma2289

54.7k8 gold badges66 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MEM Over a year ago

so, that will animate as intended and make the anchor background to 25,25,25 and, once it finishes, we remove that style attribute, resulting on an element that is "ready" to receive the CSS hover rule. Is this correct ?

Collectives™ on Stack Overflow

hover state background color lost after javascript script execution

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related