Czy użycie .css() jQuery zastępuje pseudoklasę w CSS?

Question

Zastanawiam się, dlaczego podczas korzystania z funkcji .css() nadpisuje ona pseudoklasę w CSS, jak na przykład :hover. Czy nie powinno to wpływać tylko na normalny stan elementu, a nie na :hover? czy robię coś niepoprawnie?

Oto przykład

<!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>

Kiedy strona się ładuje, otrzymuję div z tylko opacity = 0.5, zarówno dla normalnego, jak i :hover. Czy nie powinno to być 0.5 dla normalnego i 1.0 dla :hover?

Moje pytanie brzmi, jak temu zapobiec?

jquery css pseudo-class

0

Rafael Adel 31 sierpień 2012, 08:21

Answer 1

.css() stosuje style inline do wybranych elementów i zgodnie z zasadami kaskadowego stylów style inline mają wyższy priorytet niż style w arkuszu stylów .

Możesz uczynić klasę w arkuszu stylów ważniejszą niż styl wbudowany w następujący sposób:

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

2

nnnnnn 31 sierpień 2012, 08:27

Answer 2

Najlepszym sposobem na zrobienie tego, co próbujesz zrobić, jest NIE ustawianie wartości przezroczystości, ale zamiast tego użyj addClass(), removeClass() lub toggleClass(), aby wprowadzić jakiekolwiek zmiany.

1

Dan Rabinowitz 31 sierpień 2012, 08:28

Czy użycie .css() jQuery zastępuje pseudoklasę w CSS?

2 odpowiedzi

Podobne pytania

Nowe pytania

jquery