Does using .css() of jQuery override pseudo class in CSS?

Question

I wonder why when using .css() function, it overrides the pseudo class in CSS, like :hover for example. Shouldn't it only affect the normal condition of the element, not the :hover one ? or am i doing something incorrectly ?

Here's an example

<!DOCTYPE html>

<html>  
  <head>
    <style>
      #test {
        background : red;
        width: 50px;
        height: 50px;
        opacity : 0.2;
      }

      #test:hover {
        opacity:1.0;
      }
    </style>

    <script type="text/javascript" src="../jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
      $(function () {
        $('#test').css('opacity', '0.5');
      });
    </script>
  </head>

  <body>
    <div id="test"></div>
  </body>
</html>

When the page loads, i get the div with only opacity = 0.5, for both normal and :hover. Shouldn't it be 0.5 for normal and 1.0 for :hover ?

My question is how to prevent this from happening ?

.css() edits the elements inline styles, thus, overriding your pre-defined CSS. — ahren
– ahren, Commented Aug 31, 2012 at 4:24
Remove javascript and add opacity 0.5 in test and then check the page it works fine as you want.... — Arpit Srivastava
– Arpit Srivastava, Commented Aug 31, 2012 at 4:25

nnnnnn · Accepted Answer · 2012-08-31 04:27:47Z

2

.css() applies inline styles to the selected element(s), and as per the rules of cascading styles inline styles have a higher priority than the styles in your stylesheet.

You can make the class in the stylesheet more important than the inline style as follows:

 #test:hover {
     opacity:1.0 !important;
 }

answered Aug 31, 2012 at 4:27

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

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

Comments

Dan Rabinowitz · Accepted Answer · 2012-08-31 04:28:30Z

1

The best way to do what you're trying to do is NOT to set the value of opacity, but instead use addClass(), removeClass(), or toggleClass() to make any changes.

answered Aug 31, 2012 at 4:28

Dan Rabinowitz

991 silver badge5 bronze badges

Collectives™ on Stack Overflow

Does using .css() of jQuery override pseudo class in CSS?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related