Home/ Questions/Q 8457211
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T12:45:12+00:00

I wonder why when using .css() function, it overrides the pseudo class in CSS,

  • 0

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 ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    .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;
 }
    • 0