: hover에 반대되는 CSS 의사 클래스가 있습니까?

Question 1

지정할 CSS에 의사 클래스가 있습니까?

:not(:hover)

아니면 그것이 호버링되지 않는 항목을 지정하는 유일한 방법입니까?

여러 CSS3 참조를 살펴 봤는데 : hover의 반대를 지정하는 CSS 의사 클래스에 대한 언급이 없습니다.

Question 2

예, 사용합니다 :not(:hover)

.child:not(:hover){
  opacity: 0.3;
}

jsBin 데모

다른 예시; 나는 당신이 원한다고 생각한다 : "하나를 가리키면 다른 모든 요소는 어둡게" .

내 가정이 맞고 모든 선택기가 동일한 부모 안에 있다고 가정하면 :

.parent:hover .child{
    opacity: 0.2;      // Dim all other elements
}
.child:hover{
   opacity: 1;         // Not the hovered one
}

코드 스 니펫 표시

.child{
  display:inline-block;
  background:#000;
  border:1px solid #fff;
  width: 50px;
  height: 50px;
  transition: 0.4s;
}

.parent:hover .child{
  opacity: 0.3;
}
.parent .child:hover{
  opacity: 1;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Expand snippet

그렇지 않으면 ... 단순히 기본 로직을 사용하십시오.

.child{
   opacity: 0.2;
}
.child:hover{
   opacity: 1;
}

Question 3

그런 의사 클래스는 없습니다. 을 사용할 수있을 때 그럴 필요가 없습니다 :not(:hover). :not()의사 클래스의 요점은 요소가 의사 클래스와 일치하거나 일치하지 않을 수있는 모든 기존 (및 미래) 동적 의사 클래스의 별도 부정을 지정하지 않고도 작성자가 부정을 작성할 수 있도록하는 것입니다.

예를 들어 일부 요소 만 :enabled또는 일 수 있습니다. :disabled대부분의 요소는 의미론이 적용 되지 않기 때문에 해당되지 않습니다.하지만 요소는 포인팅 장치 ( :hover) 에 의해서만 지정되거나 지정 되지 않을 수 있습니다 ( :not(:hover)). 사용하여 이미 직접 달성 할 수있는 부정을 제공하는 것은 :not()그 유용성을 크게 훼손 할 수 있습니다 (여전히 다른 단순 선택기 또는 전체 복잡한 선택기 를 부정하는 데 사용할 수 있음 ).

그러한 의사 클래스가 계산적으로 더 저렴할 것이라는 주장은 매우 약합니다. 그러한 의사 클래스의 가장 순진한 구현은 리터럴 검사일 :not(:hover)것입니다. 더 복잡하거나 최적화 된 구현이 있으면 공급 업체에.보다 빠르거나 더 빠른 의사 클래스를 구현하도록 요청 :not(:hover)하고 있습니다. 이는 캐스 케이 딩과 같은 다른 옵션을 고려할 때 이미 충분히 드문 사용 사례 :not(:hover)입니다. 캐스 케이 딩이 옵션이 아닐 때마다) 쉽게 액세스 할 수 있습니다. 그것은 단순히 스펙에 시간과 노력을 정당화 구현하고 적어도 하나의 다른 기존의 100 % 기능적으로 동일 방법 (및 적용 일에 대한 대안을 테스트하지 않습니다 적어도시나리오의 80 %). 그리고 그러한 의사 클래스의 이름을 지정하는 문제도 있습니다. 여러분은 이름을 제안하지 않았고 좋은 이름도 생각할 수 없습니다. :not-hover2 바이트 만 더 짧고 입력 작업이 약간 적습니다. 어떤 경우에는 잠재적있어 더 이상 혼란 :not(:hover).

당신이 특이성에 대해 걱정하는 경우,주의 의사 클래스 자체가 특이하기위한 계산되지 않습니다; 가장 구체적인 인수는 입니다. 와 동일하게 다릅니다. 따라서 특이성도 문제가되지 않습니다.:not():not(:hover):hover

브라우저 지원에 대해 걱정이되는 경우 이러한 가상 클래스가 도입 된 경우 :not()CSS2 ( :hover처음 소개 된 지 17 년 이상)에 나타나지 않았기 때문에 와 함께 또는 이후 수준의 선택기에서 도입되었을 수 있습니다. 이전에 IE4에서 처음 구현되었습니다. 나중에 :not(:hover)브라우저가이 새로운 가상 클래스를 구현하기 시작할 때까지 작성자가 계속 사용하도록 강요 당하고 전환 할 이유가 없기 때문에 이후 수준에서 도입하는 것은 의미가 없습니다.

이것은 이벤트 대 상태에 대해 이야기하는 다음 질문과 동일하지 않다는 점에 유의하십시오 (원래는에 대한 :focus것이 아니라 :hover동일한 원칙이 적용됨). CSS에 : blur 선택자 (의사 클래스)가 있습니까?

Question 4

다른 것을 가리킬 때만 무언가를 표시하려면 다음을 사용할 수 있습니다.

selector:not(:hover)

이렇게 :

section{
   font-size:3em;
}

div:not(:hover) + section{
 display:none;
}

<div>Hover on me</div>

<section>Peek A Boo!</section>

스 니펫 확장

사용할 때 염두에 두어야 할 몇 가지 비정상적인 효과 와 결과 :not()가 있습니다.

:not(:not(...)), :not(p::before)불가능
:not(*) 분명히 적용되지 않을 것입니다
:not(.foo)가 아닌 것은 일치 .foo와 같은 태그를 포함하여, <HTML>및<body>
: 예를 들어, 규칙의 특이성을 증가 #foo:not(#bar)간단한과 같은 요소를 일치 #foo하지만, 더 높은 특이성을 가지고있다.

and작업 :not:

요소가 <div>아닌 <span>요소 : body :not(div):not(span){}

or을 (를) 사용한 작업 :not은 아직 잘 지원되지 않습니다.

.crazy또는 .fancy다음 이 아닌 요소 :body :not(.crazy, .fancy){}

소스 MDN

Question 5

a {
  /*styles*/
}

정상 (마우스로 가리 키지 않은 링크)

a:hover {
  /*styles*/
}

마우스를 올려 놓은 링크입니다.