Computer >> Computer tutorials >  >> Programming >> HTML

HTML onmouseout Event Attribute


The HTML onmouseout event attribute is triggered when the mouse pointer moves out of an HTML element in an HTML document.

Syntax

Following is the syntax −

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

Let us see an example of HTML onmouseout event Attribute−

Example

<!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>

Output

HTML onmouseout Event Attribute

Now try to move the mouse cursor over the red circle to observe how onmouseout event attribute works−

HTML onmouseout Event Attribute


HTML onmouseout Event Attribute