วิธี Ignore Hover/Mouseover Events บน Element เฉพาะด้วย CSS pointer-events Property

เรียนรู้ลบ/ignore mouseover/hover (:hover) event บน HTML elements เฉพาะด้วย pointer-events property

ผมสร้าง team gallery page ให้ลูกค้า แต่ละ gallery item เป็น UI card ใช้ overlay เปลี่ยนสี hover แตะเจอปัญหา จึงเขียน tutorial นี้

UI Card Content & Structure

แต่ละ gallery card item ประกอบด้วย:

• Employee photo - ขาวดำ
• Employee name - สีขาว
• Employee role - สีขาว
• Subtle dark background overlay

Hover mouse over card → background overlay transition เป็นสีเหลืองอ่อน semi-transparent (brand color)

UI Card Example

เวอร์ชัน simplified (design-wise) ลอง hover mouse ดู background color transition สีเหลืองอ่อน:

Employee Name Employee Role

แต่มีปัญหา อาจเห็นแล้ว ลอง hover mouse บน text area ดูปัญหา:

ทันที mouse อยู่บน text element area hover event ถูก cancel — กลับเป็น default inactive state สีเทาทันที ไม่ยอมรับ!

HTML code:

<div class="card"> <div class="card-overlay"></div> <img class="card-image" src="https://th.wsxdn.com/UploadFiles_2907/202203/2022033109324298.jpg" /> <div class="card-info"> <div class="card-name">Employee Name</div> <div class="card-role">Employee Role</div> </div> </div>

CSS:

.card { max-width: 350px; position: relative; } .card-overlay { background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5)); height: 100%; width: 100%; position: absolute; top: 0; left: 0; transition: background-color 0.6s; } .card-overlay:hover { background-color: rgba(255, 204, 7, 0.5); } .card-image { max-width: 100%; display: block; } .card-info { position: absolute; bottom: 2rem; left: 2rem; } .card-name, .card-role { color: white; font-size: 1.5rem; line-height: 1.25; padding: 0.25rem; } .card-name { font-weight: bold; }

ทำไม hover event ถูก cancel ตอน hover text area?

เพราะ stacking order ของ HTML ควบคุมโดย CSS z-index แต่มี default stacking order ถ้าไม่ address ด้วย CSS ก่อน

z-index เป็น stack order CSS property element ที่มี z-index สูงสุด (number มากที่สุด) จะอยู่หน้าสุด — สมมติ position value เหมือนกัน Default z-index ของทุก element คือ auto = zero 0

มี 2 elements absolute positioned ทั้งคู่ z-index default auto (0) ตัวไหนอยู่หน้า? (ต้องมีฝ่ายชนะ)

ตัวที่มาสุดท้ายใน HTML ชนะ

ในที่นี้ <div class="card-info"> container มาหลัง card-overlay:

<div class="card"> <div class="card-overlay"></div> <img class="card-image" src="..." /> <div class="card-info"> <div class="card-name">Employee Name</div> <div class="card-role">Employee Role</div> </div> </div>

UI Card example ตอน hover text elements → ไม่ได้ hover overlay แตะ hover <class="card-info"> element ที่ไม่มี :hover pseudo class เฉพาะ .card มี (ดู CSS code)

แก้ยังไง?

ย้าย <div class="card-overlay"></div> element ลง ด้านล่าง <div class="card-info">...</div>:

<div class="card"> <img class="card-image" src="..." /> <div class="card-info"> <div class="card-name">Employee Name</div> <div class="card-role">Employee Role</div> </div> <div class="card-overlay"></div> </div>

Stacking order สลับ เกิด:

Employee Name Employee Role

ดี overlay transition ไม่ interrupt ตอน hover text area (ลองดู)

แตะรอ... Stacking order สลับแล้ว text elements ถูก overlay ทำให้สีเทา (overlay อยู่หน้า text)

แก้ปัญหาหนึ่ง สร้างปัญหาใหม่

อย่า ใช้วิธีนี้ ย้าย <div class="card-overlay"> กลับตำแหน่งเดิม

ลองให้ .card-overlay class มี z-index: 1?

ตอนนี้ card-overlay อยู่หน้า card-info (z-index: 0) เพราะ stack order สูงกว่า hover event ทำงานต่อเนื่อง — ดี แต่...

เสียดาย ทำให้ text elements ยังคง ถูก overlay ทำให้สีเทา เหมือนตอนย้าย element physical

ไม่ยอมรับ!

Pointer Events ช่วยชีวิต!

จำได้ว่า CSS มี property pointer-events ควบคุมว่า element ควร react กับ pointer events หรือไม่

Pointer events = ทุกอย่างเกี่ยวกับเมาส์: click, scroll, hover

เพิ่ม pointer-events: none; ให้ .card-info class:

.card-info { position: absolute; bottom: 2rem; left: 2rem; pointer-events: none; /* the fix! */ }

ตอนนี้ hover ทั้ง UI Card รวม text ด้วย โดยไม่ cancel hover event — text elements คงสีขาว 100%:

Employee Name Employee Role

ดู code ที่ CodePen