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

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

---

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

HTML :

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

CSS :

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

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

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

---

나는 두 개의 클래스를 사용합니다. 테스트 클래스를 유지하고 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>

---

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

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>

---

: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 규칙에서 원하는 것을 수행합니다!

---

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

#test.nohover:hover { border: 0 }

과

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

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

---

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

.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>

---

You want to keep the selector, so adding/removing it won't work. Instead of writing a hard and fast CSS selectors (or two), perhaps you can just use the original selector to apply new CSS rule to that element based on some criterion:

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

참고URL : https://stackoverflow.com/questions/5069110/remove-hover-css-behavior-from-element