วิธีละเว้นเหตุการณ์ Hover / Mouseover บนองค์ประกอบเฉพาะใน CSS ด้วยคุณสมบัติ pointer-events

ฉันเพิ่งสร้างหน้าแกลเลอรีของทีมสำหรับลูกค้ารายหนึ่งของฉัน แต่ละรายการในแกลเลอรีจะแสดงด้วยการ์ด UI ที่ใช้การซ้อนทับที่จะเปลี่ยนสีเมื่อคุณเลื่อนเมาส์ไปเหนือรายการนั้น แต่ฉันพบปัญหาซึ่งเป็นแรงบันดาลใจในบทแนะนำนี้

เนื้อหาและโครงสร้างของการ์ด UI

รายการการ์ดแกลเลอรีแต่ละรายการประกอบด้วยองค์ประกอบเหล่านี้:

• รูปถ่ายพนักงาน - ดำ/ขาว
• ชื่อพนักงาน - ขาว
• บทบาทพนักงาน - ขาว
• การซ้อนทับพื้นหลังสีเข้มที่ละเอียดอ่อน

เมื่อผู้ใช้เลื่อนเมาส์ไปบนการ์ดแต่ละใบ พื้นหลังซ้อนทับจะเปลี่ยนเป็นสีเหลืองโปร่งแสง (สีแบรนด์)

ตัวอย่างการ์ด UI

เนื่องจากฉันต้องการให้บทแนะนำนี้มุ่งเน้นไปที่การแก้ปัญหาเฉพาะ ต่อไปนี้คือง่าย (การออกแบบที่ชาญฉลาด) ว่า UI Card มีลักษณะอย่างไร ลองเลื่อนเมาส์ไปวางเหนือมัน และดูการเปลี่ยนสีพื้นหลังเป็นสีเหลืองอ่อน:

แต่มีปัญหา คุณอาจเคยเห็นมันแล้ว ลองเลื่อนเมาส์ไปวางเหนือพื้นที่ข้อความ คุณเห็นปัญหาไหม

ทันทีที่เลื่อนเมาส์ไปเหนือพื้นที่องค์ประกอบข้อความ กิจกรรมโฮเวอร์จะถูกยกเลิก — และเปลี่ยนจากสีเหลืองทันที กลับสู่สถานะเริ่มต้นที่ไม่ใช้งาน เป็นสีเทา รับไม่ได้!

นี่คือโค้ด HTML:

<div class="card">
  <div class="card-overlay"></div>
  <img
    class="card-image"
    src="/article/uploadfiles/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;
}

แล้วเหตุใดเหตุการณ์โฮเวอร์จึงถูกยกเลิกเมื่อคุณเลื่อนเมาส์ไปเหนือพื้นที่ข้อความ

เพราะการเรียงซ้อนของ HTML ลำดับการเรียงซ้อนมักจะถูกควบคุมโดย CSS z-index คุณสมบัติ. อย่างไรก็ตาม มี ลำดับการซ้อนเริ่มต้น ที่เกิดขึ้น หากคุณไม่จัดการกับ CSS โดยตรงก่อน

z-index เป็น คำสั่งซื้อแบบกอง คุณสมบัติ CSS องค์ประกอบที่มี z-index . สูงสุด ค่า (ตัวเลข) อยู่หน้าองค์ประกอบอื่น — สมมติว่าเป็น position ค่าจะเท่ากัน ค่าเริ่มต้น z-index ค่าขององค์ประกอบทั้งหมดบนหน้าเว็บคือ auto ซึ่งเท่ากับศูนย์ 0 .

เนื่องจากเรามีองค์ประกอบสององค์ประกอบที่มีทั้งตำแหน่งที่แน่นอนและทั้งคู่มี z-index . เริ่มต้น ของ auto (0) อันไหนอยู่ข้างหน้าอีกอันในลำดับการซ้อน (อันหนึ่งต้องชนะ)?

สิ่งที่อยู่สุดท้ายใน HTML ของคุณจะเป็นผู้ชนะ

ในกรณีนี้ <div class="card-info"> คอนเทนเนอร์ที่มีองค์ประกอบข้อความชื่อและบทบาทอยู่หลัง card-overlay องค์ประกอบ:

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

ในตัวอย่างการ์ด UI ทันทีที่คุณเลื่อนเมาส์ไปเหนือองค์ประกอบข้อความ คุณจะไม่ได้วางเมาส์เหนือองค์ประกอบการซ้อนทับอีกต่อไป แต่เป็น <class="card-info"> องค์ประกอบซึ่งไม่มี :hover (คลาสหลอก) ที่แนบมาด้วย เฉพาะ .card มีสิ่งนั้น (ดูโค้ด CSS)

คุณทำอะไรได้บ้าง

หากคุณย้าย <div class="card-overlay"></div> องค์ประกอบด้านล่าง ด้านล่าง <div class="card-info>...</div> องค์ประกอบเช่นนี้:

<div class="card">
  <img
    class="card-image"
    src="/article/uploadfiles/202203/2022033109324298.jpg"
  />
  <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>

จากนั้นลำดับการซ้อนจะสลับ และสิ่งนี้จะเกิดขึ้น:

เยี่ยมมาก ตอนนี้การเปลี่ยนภาพซ้อนทับจะไม่ถูกขัดจังหวะอีกต่อไปเมื่อคุณเลื่อนเมาส์ไปเหนือพื้นที่ข้อความ (ลองเลย)

แต่เดี๋ยวก่อน... เมื่อเปลี่ยนลำดับการเรียงซ้อนแล้ว องค์ประกอบข้อความจะกลายเป็นสีเทาโดยโอเวอร์เลย์ ซึ่งตอนนี้อยู่ด้านหน้า/ด้านบนขององค์ประกอบข้อความ

เราแก้ไขปัญหาในขณะที่สร้างปัญหาอื่น

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

ถ้าเราให้ .card-overlay . แทน คลาส a z-index ค่าของ 1 ?

ตอนนี้ card-overlay จะถูกวางไว้ข้างหน้า card-info (ซึ่งยังคงมี z-index: 0 ) เพราะมันมีลำดับที่สูงกว่า (z-index: 1 ) และตอนนี้การเปลี่ยนสีในเหตุการณ์โฮเวอร์จะทำงานอย่างต่อเนื่องอีกครั้ง ซึ่งดีมาก แต่...

น่าเสียดาย การทำเช่นนี้จะส่งผลให้เหมือนเดิมทุกประการเมื่อเราย้าย <div class="card-overlay"> องค์ประกอบด้านล่าง <div class="card-info"> องค์ประกอบ. คราวนี้เราเพิ่งเปลี่ยนลำดับการซ้อนโดยตรงด้วย CSS องค์ประกอบข้อความ นิ่ง เป็นสีเทาโดยโอเวอร์เลย์

นี้เป็นที่ยอมรับไม่ได้!

ชี้เหตุการณ์เพื่อช่วยชีวิต!

ฉันจำได้ทันใดว่า CSS มีคุณสมบัติที่เรียกว่า pointer-events ซึ่งช่วยให้คุณตัดสินใจว่าองค์ประกอบควร ตอบสนอง . หรือไม่ เพื่อชี้เหตุการณ์

เหตุการณ์ตัวชี้ เป็นอะไรก็ได้ที่ต้องใช้เมาส์ของคุณ เช่น การคลิก การเลื่อน หรือเลื่อนเมาส์ไปเหนือ (โฮเวอร์) องค์ประกอบ

ดังนั้นฉันจึงเพิ่ม pointer-events: none; ไปยัง .card-info . ของฉัน คลาสเหมือนเขา:

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

และตอนนี้ คุณสามารถวางเมาส์เหนือการ์ด UI ทั้งหมด รวมถึงข้อความ โดยไม่ต้องยกเลิกเหตุการณ์โฮเวอร์ และองค์ประกอบข้อความจะคงสีขาว 100%:

ตรวจสอบรหัส CodePen