사용자 마우스가 클래스 이름이 인 요소를 가리킬 때 배경색을 적용하려고합니다 "reMode_hover".

요소가하지만 나는 색상을 변경하지 않으 도 있다"reMode_selected"

참고 : 제한된 환경에서 작업하기 때문에 자바 스크립트가 아닌 CSS 만 사용할 수 있습니다.

명확히하기 위해, 나의 목표는 호버에서 첫 번째 요소를 색칠하지만 두 번째 요소는 색칠하지 않는 것입니다.

HTML

<a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" 
 class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a>

첫 번째 정의가 작동하기를 바라고 아래에서 시도했지만 그렇지 않습니다. 내가 뭘 잘못하고 있죠?

CSS

/* do not apply background-color so leave this empty */
.reMode_selected .reMode_hover:hover 
{
}

.reMode_hover:hover 
{
   background-color: #f0ac00;
}

한 가지 방법은 다중 클래스 선택기를 사용하는 것입니다 (자손 선택기이므로 공백이 없음).

.reMode_hover:not(.reMode_selected):hover 
{
   background-color: #f0ac00;
}

<a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" 
 class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a>

최신 브라우저에서는 다음을 수행 할 수 있습니다.

.reMode_hover:not(.reMode_selected):hover{}

호환성 정보는 http://caniuse.com/css-sel3 을 참조하십시오 .

방법 1

코드의 문제 .remode_hover는의 하위 항목 을 선택한다는 것 입니다 .remode_selected. 코드를 올바르게 작동시키는 첫 번째 부분은 해당 공간을 제거하는 것입니다.

.reMode_selected.reMode_hover:hover

그런 다음 스타일이 작동하지 않게하려면에 의해 설정된 스타일을 재정의해야합니다 :hover. 즉, background-color속성 에 대응해야 합니다. 최종 코드는

.reMode_selected.reMode_hover:hover {
  background-color:inherit;
}
.reMode_hover:hover {
  background-color: #f0ac00;
}

깡깡이

방법 2

다른 방법 :not()에서 언급 한대로 다른 방법을 사용 하는 것입니다. 괄호 안에 클래스 나 속성이없는 요소를 반환합니다. 이 경우 .remode_selected거기에 넣을 것입니다. 클래스가없는 모든 요소를 ​​대상으로합니다..remode_selected

깡깡이

그러나 CSS3에 도입 되었기 때문에이 방법을 권장하지 않으므로 브라우저 지원이 이상적이지 않습니다.

방법 3

세 번째 방법은 jQuery를 사용하는 것입니다. CSS에서 .not()사용 :not()하는 것과 비슷 하지만 브라우저 지원 기능이 훨씬 뛰어난 선택기 를 타겟팅 할 수 있습니다.

깡깡이