jQuery의 .css() 사용은 CSS의 의사 클래스를 대체합니까?

.css() 기능을 사용할 때 CSS의 의사 클래스를 덮어 쓰는 이유가 궁금합니다 (예 : :hover). :hover이 아닌 요소의 정상적인 조건에만 영향을 주어야합니까? 아니면 내가 뭔가 잘못하고있는거야? 페이지가로드, 내가 정상 및 :hover 모두 만 opacity = 0.5와 사업부를 얻을 때jQuery의 .css() 사용은 CSS의 의사 클래스를 대체합니까?

여기에 예를 들어

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

입니다. 평상시에는 0.5이고 :hover 인 경우 1.0이 아니어야합니까?

제 질문은 어떻게 이런 일이 일어나지 않도록하는 것입니까?

출처

2012-08-31 Rafael Adel

'.css()'는 요소 인라인 스타일을 편집하므로 미리 정의 된 CSS를 재정의합니다. – ahren

자바 스크립트를 제거하고 테스트에서 불투명도 0.5를 추가 한 다음 원하는대로 작동하는 페이지를 확인하십시오. –

.css()는 인라인을 선택한 요소 (들) 스타일을 적용하고 이 스타일을 계단식의 규칙에 따라 인라인 스타일은 스타일 시트의 스타일보다 우선 순위가 높습니다.

다음과 같이 인라인 스타일보다 스타일 시트의 클래스가 더 중요 할 수

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

출처

2012-08-31 04:27:47 nnnnnn

Brilliant! 감사. –

당신이하려고하는 일을 할 수있는 가장 좋은 방법은 불투명도의 값을 설정하는 것이 아니라, 대신 addClass(), removeClass() 또는 toggleClass()를 사용하여 변경하십시오.

출처

2012-08-31 04:28:30

jQuery의 .css() 사용은 CSS의 의사 클래스를 대체합니까?

답변

관련 문제