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

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

Cú pháp

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

<tagname onmousemove=”script”></tagname>

Hãy để chúng tôi xem một ví dụ về Thuộc tính sự kiện onmousemove 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 onmousemove 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 onmousemove−

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