CSS 테이블 : 대체 행을 포함하여 호버시 배경 변경

Question

테이블이있는 샘플 페이지를 만들었습니다. 페이지가 나중에 삭제 될 경우 here's 코드가 붙여 넣기됩니다.

호버에서 표 행을 강조하고 싶습니다. 보통의 tr에서는 작동하지만 tr.alt (홀수 행)에서는 작동하지 않습니다. 강조 표시

코드 :

tr:hover,tr.alt:hover 
{ 
background: #f7dcdf; 
} 

코드 홀수 행에 다른 색을 만들기위한 :

tr.alt td 
{ 
background: #daecf5; 
} 

이 해결 될 수있는 방법 어떤 아이디어?

Answer 1

(이 이전 규칙을 덮어 쓰거나 또한이 세포에 .ALT 행의 배경색을 적용하는 참고 !important

tr:hover,tr.alt:hover 
{ 
    background: #f7dcdf!important; 
} 

를 추가로 호버링 효과에 대한 규칙이 .ALT 색상 아래에 있는지 확인 TD의)는,이 색상은 모두 세포 또는 문제는 tr.alt td CSS를 계단식 규칙에 따라 다음 tr.alt:hover 더 구체적이라는 것이다 전체 행

Answer 2

에 대한 그래서 그렇게 규칙을 변경 TR 배경 "앞에"표시됩니다.

쉬운 방법은 :hover 규칙이 .alt 규칙보다 구체적이되도록하는 것입니다. 변경하여 수행 할 수 있습니다 tr.alt tdtr.alt

사이드 노트로 .alt 클래스가 홀수 행을 타겟팅하는 데 필요하지 않음을 알고 있습니까? 당신을 위해 그것을 돌볼 수있는 매우 유용한 :nth-child() 의사 클래스가 있습니다. 당신은 여기에 대해 모든 것을 읽을 수 있습니다 : 나는 당신의 샘플이를 적용 할 자유를했다 http://css-tricks.com/how-nth-child-works/

: http://jsfiddle.net/3tV9b/
주 내가 한 모든 tr:nth-child(2n+1)에 변화 tr.alt td이고 .ALT 클래스를 가진 모든 선택기를 제거하는 것이.

이 기술의 가장 큰 장점은 HTML 유지 관리에 신경 쓰지 않고 원하는대로 행을 추가 및 제거 할 수 있으며 교대 색상이 계속 작동해야한다는 것입니다.

단점은 IE에서의 지원이 아니라는 것입니다. 그러나 이것은 실제로 기능이 상실된 것이 아니라, 품위 저하의 경계 내에 있다고 생각합니다.