HTML onmouseout Event Attribute

HTMLDOMWeb DevelopmentFront End Technology

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

 Live Demo

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

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


raja
Published on 27-Sep-2019 12:27:01
Advertisements