Computer >> Máy Tính >  >> Lập trình >> HTML

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

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

Cú pháp

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

<tagname onmouseover=”script”></tagname>

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

Bây giờ, hãy thử di chuyển con trỏ chuột qua vòng tròn màu đỏ để 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 onmouseover HTML


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