CSS 배경색 우선 순위

Question

jQuery를 사용하여 테이블 행의 색상을 jover로 변경하려고합니다. 다음과 같은 경우 다른 결과가 나타납니다.

.normalcolor { 
    background-color: #dedede; 
} 
.reddishcolor { 
    background-color: #ffc59c; 
} 
.hovercolor { 
    background-color: #f1e1c0; 
} 

을 지금, 나는이 코드를 사용하여 jQuery로 호버 효과를하고 있어요 : 다음과 같이

CSS의는

$("table.withhover tr").hover(function(){ 
    $(this).addClass("hovercolor"); 
}, function(){ 
    $(this).removeClass("hovercolor"); 
}); 

이상한 것은 내가 위로 마우스를 가져 가면이다 행을 class="normalcolor"으로 변경하면 배경색이 .hovercolor으로 변경됩니다. 그러나 class="reddishcolor" 행을 가져 가면 배경색이 변경되지 않습니다.

정상입니까? 그렇다면 왜? 색상과 관련이 있습니까?

감사합니다.

Answer 1

정확히 같은 순서로 CSS 클래스를 지정 했습니까? 아니면 .reddishcolor 클래스가 마지막으로 지정 되었습니까?

요소에 둘 이상의 스타일이 적용되는 경우 가장 구체적인 규칙이 사용됩니다. 규칙이 귀하의 경우와 동일하게 동일하면 최신 규칙이 사용됩니다. 당신은 CSS 규칙의 순서를 변경할 수없는 경우

, 당신은 또한 요소의 이름을 지정하여, 예를 들어, 호버 클래스보다 구체적인 만들 수 있습니다

tr.hovercolor { 
    background-color: #f1e1c0; 
} 

Answer 2

을 당신은 기존의 CSS 클래스를 제거해야 기본 색상을 정의하는 다음 호버 색상 정의하는 새로운 클래스 추가 :

$().hover(function() 
{ 
    $(this).removeClass("default-color-class").addClass("hover-color-class"); 
}); 

을 ... 또는 당신은 당신의 호버 색상 클래스가 부착 된 다른 클래스보다 우선하게는 !important CSS 키워드로 놀러 수 ~에 요소 :

.hover-state { color: #fff !important; } 

참고 : !important 키워드가 IE6에서 지원되지 않으며, 파이어 폭스 1.x에서

... 또는 당신은 당신의 호버 색상 클래스의 당신의 범위 지정의 구체적 수 :

.default-state { ... }; 
table .hover-state { ... }; /* more specific rules override less specific ones */