jquery css change not working against inline CSS

Question

For some reason the WordPress theme I am using is injecting inline CSS without a source. I figure I try and change the CSS using jQuery. When I use the console it works once, and then goes back to the inline after hovering over the pseudo a:hover selector. Also, when I add the code to the theme, it doesn't work at all. Any ideas?

jQuery( document ).ready(function() {
    console.log( "ready!" );
    jQuery('.et_pb_widget_area .et_pb_widget a').css({"color":"#0099cc"});
});

I'm fairly new to jQuery, but I can't find the answer cause I am still not sure of the syntax.

Yes! So when I hover, it defaults back to the inline styling and ignores jQuery — Ollie
– Ollie, Commented Jan 10, 2017 at 23:17
Interesting. So they may be clearing out the inline styling (which is what you are adding to) and re-adding the default styles on whatever that action is . You may have better luck using css with the important attribute — axrami
– axrami, Commented Jan 10, 2017 at 23:20
I tried that, but the inline style has an !important attribute attached, which is the killer... That's the reason why I am trying to use jQuery to override it. Inline styling right? Humbug — Ollie
– Ollie, Commented Jan 10, 2017 at 23:59

Rounin · Accepted Answer · 2017-01-11 01:05:27Z

1

Something like this should ensure that not only will jQuery reset the color when the document first loads, but later, even when the respective elements are hovered over, jQuery will maintain the color as #0099cc:

jQuery(document).ready(function(){

    jQuery('.et_pb_widget_area .et_pb_widget a').css({"color":"#0099cc"});

    jQuery('.et_pb_widget_area .et_pb_widget a').hover(function(){
        jQuery(this).css({"color":"#0099cc"});
    });

});

edited Jan 11, 2017 at 1:05

answered Jan 10, 2017 at 23:36

Rounin

29.9k13 gold badges103 silver badges127 bronze badges

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

3 Comments

Ollie Over a year ago

I looked at in the console and after the hover the console returned $ is not a function. I wrote jQuery instead and returned the same error. The site is futures.uts.edu.au if that helps?

Ollie Over a year ago

Ah, OK, I changed the $ to jQuery, then added the same classes above and it worked!!! Thanks a bunch!

Rounin Over a year ago

Updated - I should have spotted that! Glad it worked for you.

Collectives™ on Stack Overflow

jquery css change not working against inline CSS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related