요소에서 ': hover'CSS 동작 제거

142

요소 위로 마우스를 가져 가면 서식을 변경하는 CSS가 있습니다.

HTML :

<div class="test"> blah </div>

CSS :

.test:hover {  border: 1px solid red; }

어떤 경우에는 호버에 CSS를 적용하고 싶지 않습니다. 한 가지 방법은 jQuery를 사용하여 div에서 CSS 클래스를 제거하는 것이지만 그 클래스를 사용하여 자식 요소의 형식을 지정하기 때문에 다른 요소가 손상됩니다.

그래서 그것은 나를 의문으로 이끌었습니다 : 요소에서 '호버'CSS 스타일을 제거하는 방법이 있습니까?

html css

— 개발자
소스

44

나는 두 개의 클래스를 사용합니다. 테스트 클래스를 유지하고 testhover라는 두 번째 클래스를 추가하십시오.이 클래스는 테스트 클래스와 함께 호버링하려는 클래스에만 추가하십시오. 이것은 직접 요청한 것이 아니지만 더 많은 컨텍스트가 없으면 최상의 솔루션처럼 느껴지며 아마도 가장 깨끗하고 간단한 방법입니다.

예:

.test {  border: 0px; }
.testhover:hover {  border: 1px solid red; }

<div class="test"> blah </div>
<div class="test"> blah </div>
<div class="test testhover"> blah </div>

스 니펫 확장

— 비스킷
소스

277

이를 수행하는 한 가지 방법은 다음을 추가하는 것입니다.

pointer-events:none;

호버를 비활성화하려는 요소에

(참고 : 또한 해당 요소의 자바 스크립트 이벤트도 비활성화합니다. 클릭 이벤트는 실제로 요소 뒤에 빠집니다).

브라우저 지원 (2019 년 8 월 22 일 기준 97.04 %)

이것은 훨씬 더 깨끗한 것 같습니다

/**
* This allows you to disable hover events for any elements
*/
.disabled {
  pointer-events: none;  /**<-----------*/
  opacity: 0.2;
}

.button {
  border-radius: 30px;
  padding: 10px 15px;
  border: 2px solid #000;
  color: #FFF;
  background: #2D2D2D;
  text-shadow: 1px 1px 0px #000;
  cursor: pointer;
  display: inline-block;
  margin: 10px;
}

.button-red:hover {
  background: red;
}

.button-green:hover {
  background:green;  
}

<div class="button button-red">Im a red button hover over me</div>

<br/>

<div class="button button-green">Im a green button hover over me</div>

<br/>

<div class="button button-red disabled">Im a disabled red button</div>

<br/>

<div class="button button-green disabled">Im a disabled green button</div>

스 니펫 확장

— 보드 맨
소스

4

좋은 대답은 IE <11에서만 지원되지 않으므로 더 이상 큰 문제가 아닙니다.

— Olivier-interfaSys

2

이 답변은 매우 깨끗하고 정확하게 내가 찾던 것입니다. 나는 전에 그것을 사용했지만 여전히 나에게 새롭기 때문에 종종 잊어 버립니다.

— nicorellius 2016

2

내가 완벽하게 필요한 것 : D

— Alizoh

5

포인터 이벤트에 대한 공감 없음. 이것은 내가 찾은 것입니다.

— Garavani

2

@Bodman 포인터 이벤트 : 없음; 호버 배경 변경을 제거했지만 내 요소에서 하이퍼 링크를 비활성화했습니다. 호버 효과를 제거하지만 하이퍼 링크를 유지하는 방법은 무엇입니까?

— BioDeveloper

230

:not호버 적용을 원하지 않는 클래스를 제외 하려면 의사 클래스를 사용하십시오 .

깡깡이

<div class="test"> blah </div>
<div class="test"> blah </div>
<div class="test nohover"> blah </div>

.test:not(.nohover):hover {  
    border: 1px solid red; 
}

이것은 하나의 CSS 규칙에서 원하는 것을 수행합니다!

— 다니엘 드
소스

6

확실히 최고의 용해! 코드가 적고 모든 브라우저에서 잘 작동합니다.

— 벤 Besuijen

이것은 나를 위해 일했지만 나는 전에 하나의 공간을 변경해야했습니다 :hover. SASS를 사용하고 있기 때문일 수 있습니다.

— nurdyguy

2

감사합니다. touchDevice클래스를 추가 body하고 CSS 규칙을 다음과 같이 변경 하여 내 앱의 터치 장치 용 사용자 정의 버튼에 대한 호버 효과를 비활성화하는 데 사용했습니다.body:not(.touchDevice) .button:hover { ... }

— Alexander

1

그래, 그 해결책이 훨씬 낫다.

— Tsurule Vol

2

새로운 .css 클래스를 추가하십시오.

#test.nohover:hover { border: 0 }

과

<div id="test" class="nohover">blah</div>

보다 "특정한"CSS 규칙이 우선하므로이 border : 0 버전은 다른 곳에 지정된 일반 규칙보다 우선합니다.

— 마크 B
소스

그렇습니다. 또한 기본 모양도 무시합니다. 따라서 항상 호버가 표시되는 브라우저가 있습니다.

— maaartinus

1

나는 또한이 문제가 있었고, 내 솔루션은 호버 효과를 원하지 않는 요소 위에 요소를 두는 것이 었습니다.

.no-hover {
  position: relative;
  opacity: 0.65 !important;
  display: inline-block;
}

.no-hover::before {
  content: '';
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 60;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<button class="btn btn-primary">hover</button>
<span class="no-hover">
  <button class="btn btn-primary ">no hover</button>
</span>

스 니펫 확장

— 스템 플로린
소스

1

흥미로운 해결책.

— Bodman

-2

선택기를 유지하려고하므로 선택기를 추가 / 제거해도 작동하지 않습니다. 단단하고 빠른 CSS 선택기 (또는 2 개)를 작성하는 대신 원래 선택기를 사용하여 일부 기준에 따라 해당 요소에 새 CSS 규칙을 적용 할 수 있습니다.

$(".test").hover(
  if(some evaluation) {
    $(this).css('border':0);
  }
);

— Buley
소스