:hover 효과를 제거한다는 것은 사용자가 요소 위에 마우스를 올렸을 때 해당 요소가 시각적으로 변하지 않도록 만드는 것을 의미합니다. 호버 효과가 불필요하거나, 주의를 산만하게 하거나, 페이지 전체 디자인과 어울리지 않는 경우 이러한 작업이 필요할 수 있습니다.
CSS :hover 동작을 제거하는 방법
깔끔하고 일관된 스타일링을 유지하면서 요소의 :hover 효과를 비활성화하는 데 활용할 수 있는 몇 가지 효과적인 방법이 있습니다.
방법 1: pointer-events: none 사용
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>
실행 결과: 첫 번째 버튼은 마우스를 올리면 진한 파란색으로 변하지만, 두 번째 버튼은 아무런 변화가 없으며 클릭조차 할 수 없습니다.
방법 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>
실행 결과: 첫 번째 버튼은 호버 시 색이 어두워지지만, 두 번째 버튼은 !important 재정의 덕분에 원래의 초록색을 그대로 유지합니다.
방법 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>
실행 결과: 첫 번째 버튼은 호버 시 파란색 배경으로 채워지지만, no-hover 클래스가 지정된 두 번째 버튼은 변하지 않습니다.
방법 4: 비활성(Disabled) 상태 구현
요소가 비활성 상태임을 시각적으로 표시하고 호버 효과를 함께 제거하는 disabled 클래스를 구현할 수 있습니다.
<!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>
실행 결과: 첫 번째 버튼은 호버 시 색이 어두워지는 반면, 비활성화된 버튼은 불투명도가 낮은 회색으로 표시되고 "금지(not-allowed)" 커서가 나타납니다.
결론
위에서 소개한 방법들은 CSS 호버 효과를 제거하기 위한 유연한 해결책을 제공합니다. 모든 상호작용을 완전히 차단하려면 pointer-events: none을, 기존 스타일을 강제로 유지하려면 !important를, 특정 요소만 선택적으로 제외하려면 :not()을, 그리고 의미론적인 비활성 상태를 표현하려면 disabled 클래스를 활용하는 것이 좋습니다.
