CSS 색상 속성이 무시되었습니다.

Question

텍스트 상자의 색상과 그 링크를 가져 가면 색상이 바뀌게됩니다. 하지만 먼저 상자의 배경색이 반전되고 커서가 텍스트 (링크) 위로 움직여야 텍스트 색상이 반전됩니다.

#nav span:hover { 
    color:white; /* ignored ! */ 
    background-color:#687078; 
} 

분명히 color:white이 무시됩니다 (A 때문에 : 호버이 우선 순위가?)
가 어떻게 동시에 색상을 변경할 수 있습니까?

---

전체 HTML 및 CSS

: http://jsfiddle.net/stevenvh/LvgRJ/4/

Answer 1

사용

#nav span a { color:#214275; text-decoration:none; } 
#nav span:hover { background-color:#687078; } 
#nav span:hover a { color:white; } 

Demo

코드의 문제는, 당신은 <span>하지만 012 마우스를 가져 가면이면 #nav span:hover 규칙 만 적용되지만 #nav span a:hover은 적용되지 않습니다. 대신 #nav span:hover a을 사용해야합니다.

오프 주제 : 어린이 선택기 대신 자손 선택기 (>)를 사용하는 것을 고려해보십시오. 조금 더 느립니다.

Answer 2

를 사용하여 선택 :

#nav span:hover, 
#nav span:hover a { 
    color: white; 
} 

가 span 요소를 유혹 할 때 착색되는 a 원인; 나 :

부모/조상에서 색상을 상속하는 a 원인

#nav span a { 
    color: inherit; 
} 

.