:hover 제거 효과는 사용자가 요소 위로 마우스를 가져갈 때 요소의 모양이 변경되는 것을 중지하는 것을 의미합니다. 호버 효과가 불필요하거나 주의를 산만하게 하거나 페이지 디자인에 맞지 않는 경우 이 작업을 수행해야 할 수 있습니다.
CSS 제거 방법:hover 동작
:hover을 비활성화하는 효과적인 방법은 여러 가지가 있습니다. 깔끔하고 일관된 스타일을 유지하면서 요소로부터 효과를 얻을 수 있습니다.
방법 1:포인터 이벤트 사용:없음
pointer-events: none 속성은 호버 효과를 포함한 모든 마우스 상호 작용을 비활성화합니다. 이렇게 하면 요소가 포인터 이벤트에 응답하는 것을 완전히 방지할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #007bff;
padding: 10px 20px;
color: white;
cursor: pointer;
border: none;
border-radius: 4px;
margin: 5px;
}
.button:hover {
background-color: #0056b3;
}
.no-hover {
pointer-events: none;
}
</style>
</head>
<body>
<button class="button">Hover Active</button>
<button class="button no-hover">Hover Disabled</button>
</body>
</html>
The first button changes to dark blue on hover, while the second button remains unchanged and cannot be clicked.
방법 2:!important로 재정의
!important을 사용하세요 마우스를 가져가는 동안 원래 스타일을 강제로 활성화하는 선언
<!DOCTYPE html>
<html>
<head>
<style>
.button {
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
margin: 5px;
cursor: pointer;
}
.button:hover {
background-color: #218838;
}
.override-hover:hover {
background-color: #28a745 !important;
}
</style>
</head>
<body>
<button class="button">Normal Hover</button>
<button class="button override-hover">Override Hover</button>
</body>
</html>
The first button darkens on hover, while the second button maintains its original green color due to the !important override.
방법 3::not() 의사 클래스 사용
:not()를 사용하여 특정 클래스가 있는 요소를 제외한 모든 요소에 호버 효과를 적용합니다. 선택기
<!DOCTYPE html>
<html>
<head>
<style>
.button {
padding: 10px 20px;
background-color: white;
color: #3498db;
border: 2px solid #3498db;
border-radius: 4px;
margin: 5px;
cursor: pointer;
}
.button:not(.no-hover):hover {
background-color: #3498db;
color: white;
}
</style>
</head>
<body>
<button class="button">Hover Enabled</button>
<button class="button no-hover">Hover Disabled</button>
</body>
</html>
The first button fills with blue background on hover, while the second button with the no-hover class remains unchanged.
방법 4:비활성화 상태 만들기
요소가 비활성 상태임을 시각적으로 나타내고 호버 효과를 제거하는 비활성화된 클래스를 구현합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
margin: 5px;
cursor: pointer;
}
.button:hover {
background-color: #0056b3;
}
.disabled {
background-color: #6c757d;
opacity: 0.6;
cursor: not-allowed;
}
.disabled:hover {
background-color: #6c757d;
}
</style>
</head>
<body>
<button class="button">Active Button</button>
<button class="button disabled">Disabled Button</button>
</body>
</html>
The first button darkens on hover, while the disabled button appears grayed out with reduced opacity and shows a "not-allowed" cursor.
결론
이러한 방법은 CSS 호버 효과를 제거하기 위한 유연한 솔루션을 제공합니다. pointer-events: none 사용 완전한 상호작용 차단을 위해 !important 스타일 재정의의 경우 :not() 선택적 적용을 위해 또는 의미론적 비활성 상태를 위해 비활성화된 클래스를 위해.
