home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

เหตุการณ์ onmouseover: รันสคริปตเมื่อเมาส์ชี้เข้าองค์ประกอบ

เหตุการณ์ onmouseover จะถูกกระตุ้นเมื่อเคอร์เซอร์เมาส์เข้าสู่พื้นที่ขององค์ประกอบ HTML ใช้สำหรับ Hover Effects, Tooltips, Dropdown Menus, และการแสดงข้อมูลเพิ่มเติม

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
    <h3 id="myid" onmouseover="display()" style="cursor: pointer; padding: 10px;">
        ชี้เมาส์ที่นี่
    </h3>
    <p>วางเมาส์บนหัวข้อเพื่อเปลี่ยนสี</p>
    <script>
        function display() {
            document.getElementById("myid").style.color = "red";
        }
    </script>
</body>
</html>

CSS :hover vs JavaScript onmouseover

วิธี ข้อดี ข้อเสีย
CSS :hover ประสิทธิภาพดี, ไม่ต้องใช้ JS, Smooth Animation จำกัดแค่ Style, ไม่ทำ Logic ได้
JS onmouseover ทำ Logic อะไรก็ได้, Dynamic Content Performance Cost, ต้องจัดการ State เอง

แนะนำ: ใช้ CSS สำหรับ Visual Effects

<style>
    .card {
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    }
</style>

<div class="card">เนื้อหา</div>

เมื่อควรใช้ JavaScript (onmouseover)

  • Tooltips ที่ต้อง Fetch Data / คำนวณ Dynamic
  • Dropdown/Mega Menu ที่ซับซ้อน
  • Image Zoom / Magnifier
  • Preview Links (Link Preview on Hover)
  • Games/Canvas Interactions

คู่กับ onmouseout / onmouseleave

element.onmouseover = () => showTooltip();
element.onmouseleave = () => hideTooltip(); // ดีกว่า mouseout สำหรับ tooltip