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.


Following is the syntax −

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

Let us see an example of HTML onmouseout event Attribute−


 Live Demo

<!DOCTYPE html>
   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;
<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>
   function mouseMoveFn() {
      document.querySelector('.circle').style.background = '#2274A5';
   function mouseOutFn() {
      document.querySelector('.circle').style.background = '#0B6E4F';


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

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