การลบ :โฮเวอร์ เอฟเฟกต์หมายถึงการหยุดองค์ประกอบไม่ให้เปลี่ยนรูปลักษณ์เมื่อผู้ใช้เลื่อนเมาส์ไปเหนือองค์ประกอบนั้น คุณอาจต้องทำเช่นนี้หากเอฟเฟกต์โฮเวอร์นั้นไม่จำเป็น ทำให้เสียสมาธิ หรือไม่เข้ากับการออกแบบเพจของคุณ
วิธีการลบ CSS :พฤติกรรมโฮเวอร์
มีหลายวิธีที่มีประสิทธิภาพในการปิดการใช้งาน 09 เอฟเฟกต์จากองค์ประกอบต่างๆ ในขณะที่ยังคงรักษาสไตล์ที่สะอาดตาและสม่ำเสมอ
วิธีที่ 1:การใช้เหตุการณ์ตัวชี้:ไม่มี
17 คุณสมบัติปิดการใช้งานการโต้ตอบของเมาส์ทั้งหมด รวมถึงเอฟเฟกต์โฮเวอร์ สิ่งนี้จะป้องกันไม่ให้องค์ประกอบตอบสนองต่อเหตุการณ์ตัวชี้
<!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:แทนที่ด้วย !สำคัญ
ใช้ 24 ประกาศเพื่อบังคับให้สไตล์ดั้งเดิมยังคงใช้งานอยู่ในระหว่างการโฮเวอร์
<!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() Pseudo-Class
ใช้เอฟเฟกต์โฮเวอร์กับองค์ประกอบทั้งหมด ยกเว้นองค์ประกอบที่มีคลาสเฉพาะโดยใช้ 39 ตัวเลือก
<!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 ใช้ 44 สำหรับการบล็อกการโต้ตอบโดยสมบูรณ์ 56 สำหรับการแทนที่สไตล์ 69 สำหรับแอปพลิเคชันที่เลือกหรือคลาสที่ปิดใช้งานสำหรับสถานะที่ไม่ได้ใช้งานเชิงความหมาย
