แสดงองค์ประกอบเมื่อเมาส์เข้าไปด้วย JavaScript

สมมติว่าคุณมีองค์ประกอบที่มองไม่เห็น (เช่น แถบ/เมนูการทำงาน) ที่คุณต้องการแสดงเมื่อเมาส์ของผู้ใช้เข้าสู่พื้นที่นั้น เราสามารถทำได้โดยตั้งค่าเหตุการณ์ mouseenter JavaScript

วิธีการทำ:

มาร์กอัป HTML

เพิ่มโค้ด HTML ต่อไปนี้ในตัวแก้ไขที่คุณชื่นชอบ (สำหรับออนไลน์ ผมแนะนำ CodePen

<div class="invisible-box">Yay you can see me!</div>

การจัดรูปแบบ CSS

เพิ่ม CSS ต่อไปนี้ในสไตล์ชีตของคุณ:

.invisible-box {
  opacity: 0;
  transition: all 500ms;
  padding: 32px;
  margin-top: 32px;
  margin-bottom: 32px;
  background-color: #cf4b32;
  color: #fff;
  text-align: center;
}

.opacity-1 {
  opacity: 1;
}

สังเกตว่า .invisible-box คลาสมี opacity: 0; ซึ่งหมายความว่ามันถูกซ่อนไว้โดยค่าเริ่มต้น ด้านล่างมีคลาสยูทิลิตี้ .opacity-1 ซึ่งเราจะใช้แสดงองค์ประกอบอีกครั้งด้วย JavaScript

JavaScript mouseenter เหตุการณ์

เพิ่มโค้ดต่อไปนี้ในสคริปต์ JS ของคุณ:

let invisibleBox = document.querySelector(".invisible-box")

function addFullOpacity() {
  invisibleBox.classList.add("opacity-1")
}

invisibleBox.addEventListener("mouseenter", addFullOpacity)

วิธีการทำงานของโค้ด JavaScript

• ขั้นแรกเราใช้ querySelector() เพื่อค้นหาและคว้า .invisible-box . จากนั้นเรากำหนดให้ตัวแปรที่มีชื่อที่เหมาะสม:invisibleBox .
• จากนั้นเราก็ตั้งค่า การประกาศฟังก์ชัน และตั้งชื่อ addFullOpacity() . ภายในร่างกาย {..} เราเพิ่ม คำสั่ง .
• คำสั่งแนบ add() . ของคุณสมบัติ classList วิธีการในกล่องที่มองไม่เห็นของเรา — และเพิ่ม opacity-1 คลาสไปยังองค์ประกอบกล่องที่มองไม่เห็นของเรา
• สุดท้าย เราตั้งค่า addEventListener() และให้อาร์กิวเมนต์สองข้อ อาร์กิวเมนต์แรกรอฟัง mouseenter เหตุการณ์. อาร์กิวเมนต์ที่สองคือการเรียก addFullOpacity() ฟังก์ชั่นที่เราสร้างขึ้นด้านบน (ทันทีที่ลงทะเบียนเหตุการณ์ mouseenter)

ตัวป้อนเมาส์เทียบกับเมาส์โอเวอร์หรือไม่

คุณอาจสังเกตเห็นว่ายังมีประเภทเหตุการณ์ที่เรียกว่า mouseover — ต่างจาก mouseenter อย่างไร

ความแตกต่างที่สำคัญคือ:

• ตัว เมาส์ เหตุการณ์จะทริกเกอร์ทุกครั้งที่ผู้ใช้เลื่อนเมาส์ไปเหนือองค์ประกอบหลักหรือ องค์ประกอบย่อย มันยังคงทำงานอยู่หากคุณยังคงย้อนกลับและองค์ประกอบที่สี่ — ซึ่งอาจมีราคาแพงและในแง่ของประสิทธิภาพ
• เหตุการณ์ mouseenter ทริกเกอร์ เท่านั้น เมื่อเมาส์เข้าสู่องค์ประกอบหลักเป้าหมาย — มันไม่สนเรื่องลูกของมัน :-(

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

แหล่งข้อมูล

• CodePen พร้อมรหัสทั้งหมด
• ป้อนเมาส์ของ MDN Web Docs