배경 스타일을 원본으로 다시 정의하는 방법은 무엇입니까?

Question

나는 다음과 같은 상황이 : table_green 클래스가있는 tr에 가져가의 테이블이 class='data_table unclickable_table' 세트가있는 경우

.table_green { 
background: #B4E391; 
} 
.data_table tbody tr:hover { 
background-color: #fff; 
cursor: pointer; 
} 
.unclickable_table tbody tr:hover { 
background-color: inherit; 
cursor: default; 
} 

는 이제 tr originaly 녹색 색상, 그리고 내가 원하는, 즉의 background-color 속성은하지 않습니다 변경하고 녹색 유지하지만, inherit는

예 HTML 작동하지 않습니다

<table class='data_table unclickable_table'> 
<tbody> 
<tr class='table_green'> 
<td>Untill it goes Click!</td> 
</tr> 
</tbody></table> 

또는이 바이올린 : http://jsfiddle.net/nyDNc/1/

도움이 필요하십니까?

Answer 1

이것은 당신의 테이블 요소를 어떻게 스타일링하는지에 따라 귀하의 구조 내에서 작동하는 솔루션입니다.

inherit 배경이없는 테이블에서 상속하기 때문에 작동하지 않습니다. 대신 tr을 설정하고 호버에있는 td의 색을 변경하여 상속 할 컨텍스트를 갖도록 할 수 있습니다.

작업 예제 here on JSFiddle을 참조하십시오.

CSS의는 다음과 같습니다

내가 아주 잘 당신을 이해 확실하지 않다

.table_green { 
    background: #B4E391; 
} 
.data_table tbody tr:hover td { 
    background-color: #fff; 
    cursor: pointer; 
} 
.unclickable_table.data_table tbody tr:hover td { 
    background-color: inherit; 
    cursor: default; 
} 

Answer 2

왜 첫 번째 클래스의 효과를 무시하려면 두 번째 클래스를 추가해야합니까? 왜 효과를 원하지 않는 행에서 'data_table'클래스를 제거하지 않는 것이 좋을까요?

Answer 3

하지만

DEMO IS HERE: 
http://jsfiddle.net/nyDNc/1/