Home/ Questions/Q 7535299
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T06:16:21+00:00

After running this: $(‘.bar’).css({‘color’:’#fff’}); hover for .bar stops working. Why? Also, $(‘.bar:hover’).css({‘color’:’#fff’}); doesn’t change

  • 0

After running this: $('.bar').css({'color':'#fff'}); hover for .bar stops working. Why?

Also, $('.bar:hover').css({'color':'#fff'}); doesn’t change hover’s color too, why? What am I missing?

http://jsfiddle.net/hh4NJ/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You haven’t defined what you mean by “hover”, but if you’re talking about CSS :hover, then it’s because inline styles (as set by .css() override stylesheet styles.

    You can add !important to your CSS definition to override the inline.

    .bar:hover {
    color: #ABCDEF !important;
}

    I don’t believe this works with older IE though.

    DEMO: http://jsfiddle.net/hh4NJ/1/

    Another (and arguably better) solution would be to use .addClass() instead of .css() to change the style. Then you can take care of all of it in your CSS (except for adding/removing the class of course).

    $('.bar').addClass('whiteColor');


    .whiteColor {
    color:#fff;
}

    DEMO: http://jsfiddle.net/hh4NJ/2/

    Regarding your update, you can’t use pseudo selectors like :hover for DOM selection.

    • 0