Loại bỏ hiệu ứng :hover có nghĩa là ngăn chặn phần tử thay đổi giao diện khi người dùng di chuột qua nó. Bạn có thể cần làm điều này nếu hiệu ứng hover không cần thiết, gây phân tâm hoặc không phù hợp với thiết kế trang của bạn.
Các phương pháp loại bỏ hành vi CSS :hover
Có một số cách hiệu quả để vô hiệu hóa hiệu ứng :hover từ các phần tử trong khi duy trì kiểu dáng sạch sẽ, nhất quán.
Phương pháp 1: Sử dụng pointer-events: none
Thuộc tính pointer-events: none vô hiệu hóa tất cả tương tác chuột, bao gồm hiệu ứng hover. Điều này hoàn toàn ngăn chặn phần tử phản hồi các sự kiện con trỏ.
<!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>
Nút đầu tiên thay đổi thành xanh đậm khi hover, trong khi nút thứ hai không thay đổi và không thể nhấp.
Phương pháp 2: Ghi đè với !important
Sử dụng khai báo !important để buộc kiểu gốc giữ hoạt động trong hover.
<!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>
Nút đầu tiên sẫm màu khi hover, trong khi nút thứ hai giữ màu xanh lá gốc do ghi đè !important.
Phương pháp 3: Sử dụng pseudo-class :not()
Áp dụng hiệu ứng hover cho tất cả phần tử trừ những cái có class cụ thể sử dụng bộ chọn :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>
Nút đầu tiên fill nền xanh khi hover, trong khi nút thứ hai với class no-hover không thay đổi.
Phương pháp 4: Tạo trạng thái Disabled
Triển khai class disabled trực quan chỉ ra phần tử không hoạt động và loại bỏ hiệu ứng hover.
<!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>
Nút đầu tiên sẫm màu khi hover, trong khi nút disabled xuất hiện xám mờ với độ mờ giảm và hiển thị con trỏ "not-allowed".
Kết luận
Các phương pháp này cung cấp giải pháp linh hoạt để loại bỏ hiệu ứng CSS hover. Sử dụng pointer-events: none để chặn hoàn toàn tương tác, !important để ghi đè kiểu, :not() cho áp dụng chọn lọc, hoặc class disabled cho trạng thái không hoạt động mang nghĩa ngữ nghĩa.