แอตทริบิวต์เหตุการณ์ onmouseout ของ HTML

แอตทริบิวต์เหตุการณ์ onmouseout ของ HTML จะถูกกระตุ้นเมื่อตัวชี้เมาส์เคลื่อนที่ออกจากองค์ประกอบ HTML ในเอกสาร HTML

ไวยากรณ์

ไวยากรณ์มีดังนี้ −

<tagname onmouseout="script"></tagname>

ลองดูตัวอย่างการใช้งานแอตทริบิวต์เหตุการณ์ onmouseout ของ HTML −

ตัวอย่าง

<!DOCTYPE html> <html> <head> <style>    body {       color: #000;       height: 100vh;       background-color: #FBAB7E;       background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);       text-align: center;    }    .circle {       background: #db133a;       height: 150px;       width: 150px;       border-radius: 50%;       margin: 10px auto;    }    p {       margin: 30px auto;    } </style> </head> <body> <h1>การสาธิตแอตทริบิวต์เหตุการณ์ onmousemove ของ HTML</h1> <div class="circle" onmousemove="mouseMoveFn()" onmouseout="mouseOutFn()"></div> <p>ลองเลื่อนเคอร์เซอร์บนวงกลมสีแดง</p> <script>    function mouseMoveFn() {       document.querySelector('.circle').style.background = '#2274A5';    }    function mouseOutFn() {       document.querySelector('.circle').style.background = '#0B6E4F';    } </script> </body> </html>

ผลลัพธ์

ลองเลื่อนเคอร์เซอร์เมาส์บนวงกลม สีแดง เพื่อสังเกตการทำงานของแอตทริบิวต์เหตุการณ์ onmouseout −