Xóa :hover hiệu ứng có nghĩa là ngăn một phần tử thay đổi diện mạo khi người dùng di chuột qua nó. Bạn có thể cần phải làm điều này nếu hiệu ứng di chuột là không cần thiết, gây mất tập trung hoặc không phù hợp với thiết kế trang của bạn.
Các phương pháp xóa CSS :hành vi di chuột
Có một số cách hiệu quả để vô hiệu hóa :hover hiệu ứng từ các yếu tố trong khi vẫn duy trì kiểu dáng gọn gàng, nhất quán.
Cách 1:Sử dụng sự kiện con trỏ:none
pointer-events: none thuộc tính vô hiệu hóa tất cả các tương tác chuột, bao gồm cả hiệu ứng di chuột. Điều này hoàn toàn ngăn phần tử phản hồi vớ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>
The first button changes to dark blue on hover, while the second button remains unchanged and cannot be clicked.
Phương pháp 2:Ghi đè bằng !important
Sử dụng !important khai báo để buộc các kiểu gốc vẫn hoạt động trong khi di chuột
<!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.
Phương pháp 3:Sử dụng Lớp giả :not()
Áp dụng hiệu ứng di chuột cho tất cả các thành phần ngoại trừ những thành phần có lớp cụ thể bằng cách sử dụng :not() bộ chọn
<!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.
Phương pháp 4:Tạo trạng thái vô hiệu hóa
Triển khai một lớp bị vô hiệu hóa để biểu thị trực quan phần tử không hoạt động và loại bỏ hiệu ứng di chuột
<!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.
Kết luận
Các phương pháp này cung cấp các giải pháp linh hoạt để loại bỏ hiệu ứng di chuột CSS. Sử dụng pointer-events: none để chặn tương tác hoàn toàn, !important để ghi đè kiểu, :not() dành cho ứng dụng có chọn lọc hoặc các lớp bị vô hiệu hóa đối với trạng thái không hoạt động về mặt ngữ nghĩa.
