เปลี่ยนสีพื้นหลังเว็บเพจด้วย onmouseover และ backgroundColor

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

<!DOCTYPE html>
<html>
<body>
  <h2>หัวข้อ 2</h2>
  <a onmouseover="document.body.style.backgroundColor='orange'">
    ชี้เมาส์ที่นี่เพื่อเปลี่ยนสีพื้นหลัง
  </a><br>
</body>
</html>

ผลลัพธ์

เมื่อนำเมาส์ชี้ไปที่ลิงก์ "ชี้เมาส์ที่นี่..." สีพื้นหลังของหน้าเว็บจะเปลี่ยนเป็นสีส้มทันที

คำอธิบายโค้ด

• onmouseover: เหตุการณ์เมื่อเมาส์เข้าพื้นที่อิลิเมนต์
• document.body: อ้างอิงถึงแท็ก <body>
• .style.backgroundColor: คุณสมบัติ CSS background-color ของ body
• 'orange': ค่าสี (รองรับชื่อสี, hex, rgb, hsl)

เหตุการณ์เมาส์ที่เกี่ยวข้อง

แนวทางปฏิบัติที่ดีกว่า (Modern Approach)

<!-- แยก HTML และ JavaScript -->
<a id="colorTrigger" href="#">ชี้เพื่อเปลี่ยนสี</a>

<script>
  document.getElementById('colorTrigger').addEventListener('mouseover', function() {
    document.body.style.backgroundColor = 'orange';
  });
  
  // รีเซ็ตสีเมื่อเมาส์ออก
  document.getElementById('colorTrigger').addEventListener('mouseout', function() {
    document.body.style.backgroundColor = '';
  });
</script>