Thuộc tính sự kiện onmouseout HTML

Thuộc tính sự kiện onmouseout HTML được kích hoạt khi con trỏ chuột di chuyển ra khỏi phần tử HTML trong tài liệu HTML.

Cú pháp

Sau đây là cú pháp -

<tagname onmouseout=”script”></tagname>

Hãy để chúng tôi xem một ví dụ về Thuộc tính sự kiện onmouseout HTML−

Ví dụ

<!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>HTML onmousemove Event Attribute Demo</h1>
<div class="circle" onmousemove="mouseMoveFn()" onmouseout="mouseOutFn()"></div>
<p>Try to move the cursor over the red circle</p>
<script>
   function mouseMoveFn() {
      document.querySelector('.circle').style.background = '#2274A5';
   }
   function mouseOutFn() {
      document.querySelector('.circle').style.background = '#0B6E4F';
   }
</script>
</body>
</html>

Đầu ra

Thuộc tính sự kiện onmouseout HTML

Bây giờ, hãy thử di chuyển con trỏ chuột qua màu đỏ khoanh tròn để quan sát cách hoạt động của thuộc tính sự kiện onmouseout−

Thuộc tính sự kiện onmouseout HTML