js에서 잘못된 호버 문제를 해결하는 방법

이것은 실제로 CSS의 우선순위로 인해 발생합니다.

먼저 js를 사용하여 CSS 속성을 추가하지 않고 hover가 배경색을 정상적으로 설정하는 방법을 살펴보겠습니다.

<div id="add"></div>

#add{
  width: 50px;
  height: 50px;
  background-color: greenyellow;
}#add:hover{
  background-color: #000;
}

왼쪽 그림은 기본이고, 오른쪽 그림은 마우스를 올렸을 때의 모습입니다. 이제 호버가 정상적으로 표시될 수 있습니다.

(아래 사진은 왼쪽이 기본이고 오른쪽이 호버입니다. 스크린샷 도구가 마우스를 캡쳐할 수 없기 때문일 것입니다.)

그런데 js를 통해 CSS 스타일을 삽입하면 마우스를 켰을 때 호버 스타일이 나옵니다. 배치하면 적용되지 않습니다.

var add = document.getElementById("add");
add.style.backgroundColor = "red";

호버에 설정된 #000 속성이 이제 유효하지 않습니다.

하지만 이것은 hover 의사 클래스의 손실된 기능이 아닙니다. 설정이 js에서 추가한 스타일이 아닌 경우에는 hover가 유효하지 않은 것을 볼 수 있습니다. 예를 들어 글꼴 색상을 추가해 보세요.

#add:hover{
  background-color: #000;
  color: yellow;
}

글꼴 색상이 여전히 변경되는 것을 볼 수 있습니다.

그 이유는 js에 추가해야 할 CSS 스타일을 html 태그의 스타일에 직접 추가하고, 스타일의 우선순위가 CSS 의사 클래스보다 높기 때문입니다.

스타일, 호버, ID 선택기를 위에서 아래로.

브라우저 디버깅 도구를 보면 스타일에 js가 직접 추가된 것을 볼 수 있습니다.

그럼 어떻게 해야 할까요?

선택자의 우선순위에 대해 이야기합니다. 그러나 CSS 의사 클래스와 스타일의 우선순위에 대해서는 언급하지 않았습니다.

하지만 :hover 의사 클래스도 유효하지 않습니다. 설명 스타일>css 의사 클래스>id>클래스.

:hover 속성 뒤에 !important를 추가하세요. 무엇보다도 !중요한 우선순위가 되어야 합니다! !

!중요>스타일>CSS 의사 클래스>ID>클래스.

#add:hover{
  background-color: #000 !important;
}

이제 드디어 원하는 결과를 얻었습니다.

위 내용은 js에서 잘못된 호버 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!