오버라이드하지 않는 활성 클래스 추가하기

Question

나는 여기서 간단한 것을 놓치고 있다고 확신한다; 나는 호버 상에 테두리를 추가하는 <LI> 요소들의 콜렉션을 가지고있다. (실제로 불투명도를 변경한다.)

그 중 하나가 선택되면 I user JQuery가 해당 요소에 "활성"클래스를 추가합니다. .active 클래스는 요소에 파란색 테두리를 제공합니다. 그러나 그 요소가 위에 맴돌면 여전히 검은 색 테두리가 추가되거나 시도됩니다.

질문 : LI 요소에 .active 클래스가없는 경우 테두리 만 표시하도록 어떻게 지정할 수 있습니까? 여기

내가 노력하고있어 CSS의 :

.overview li { border:1px solid rgba(0,0,0,0.0);} /* transparent border */ 

.overview li:hover{ border:1px solid rgba(0,0,0,0.8); } /* show on hover */ 

.overview li .active { border:1px solid rgba(51,204,204,0.9); } /* change color on active */ 

.overview li .active:hover { border:1px solid rgba(51,204,204,0.9); } /* trying to force border */ 

Answer 1

당신은 기본적으로

.overview li.active { border:1px solid rgba(51,204,204,0.9); } /* change color on active */ 

.overview li.active:hover { border:1px solid rgba(51,204,204,0.9); } /* trying to force border */ 

" " 너무 많은 빈 공간을 추가, 당신은 자식/손자 노드에있는 모든 클래스 active을 찾고 있었다 li 자체가 아닌 li에 있습니다.

Answer 2

.overview li .active은 " '활성'클래스를 가지며 'overview'클래스의 요소 인 하위 요소 인 li의 하위 요소를 의미합니다. 클래스 'overview'가있는 요소의 하위 인 'active'클래스가있는 li을 의미합니다.

행운의 공간을 제거하고 .overview li.active과 .overview li.active:hover을 수행해야합니다.