[Edit]

JavaScript - onmouseout event example

1 contributors

2 contributions

0 discussions

0 points

Created by:

Jan-Alfaro

681

In this article, we would like to show you onmouseout event example in JavaScript.

Quick solution:

xxxxxxxxxx
 
var myElement = document.querySelector('#my-element');
​
myElement.addEventListener('mouseout', function() {
    console.log('onmouseout event occurred.');
});

or:

xxxxxxxxxx
 
<div onmouseout="handleMouseout()"> div body here... </div>

or:

xxxxxxxxxx
 
var myElement = document.querySelector('#my-element');
​
myElement.onmouseout = function() {
    console.log('onmouseout event occurred.');
};

Note:

The onmouseout is usually used with onmouseover event. Check examples below to see how they work.

Practical examples

Edit

There are three common ways how to use onmouseout event:

with event listener,
with element attribute,
with element property.

1. Event listener based example

Edit

In this section, we want to show how to use onmouseout event on div element via event listener mechanism.

xxxxxxxxxx
 
<!doctype html>
<html>
  <head>
    <style>
      body {
        padding: 0 0 0 10px;
        height: 260px;
      }
      #square {
        padding: 10px;
        height: 120px;
        width: 120px;
        border-radius: 10px;
        background: #b5edc2;
        transition: 1s;
      }
    </style>
  </head>
  <body>
    <p>Move mouse pointer onto the square:</p>
    <div id="square"/>
    <script>
      var mySquare = document.querySelector('#square'); // find element by id
​
      mySquare.addEventListener("mouseover", handleMouseover); // add mouseover event
​
      function handleMouseover(){
        mySquare.style.height = "200px";
        mySquare.style.width = "200px";
      }
      
      mySquare.addEventListener("mouseout", handleMouseout); // add mouseout event
​
      function handleMouseout(){
        mySquare.style.height = "120px";
        mySquare.style.width = "120px";
      }
    </script>
  </body>
</html>

Auto running

2. Attribute based example

Edit

In this section, we want to show how to use onmouseout event on div element via attribute.

xxxxxxxxxx
 
<!doctype html>
<html>
  <head>
    <style>
      body {
        padding: 0 0 0 10px;
        height: 260px;
      }
      #square {
        padding: 10px;
        height: 120px;
        width: 120px;
        border-radius: 10px;
        background: #b5edc2;
        transition: 1s;
      }
    </style>
  </head>
  <body>
    <p>Move mouse pointer onto the square:</p>
    <div id="square" onmouseover="handleMouseover()" onmouseout="handleMouseout()"/>
    <script>
      var mySquare = document.querySelector('#square');
​
      function handleMouseover(){
        mySquare.style.height = "200px";
        mySquare.style.width = "200px";
      }
​
      function handleMouseout(){
        mySquare.style.height = "120px";
        mySquare.style.width = "120px";
      }
    </script>
  </body>
</html>

Auto running

3. Property based example

Edit

In this section, we want to show how to use onmouseout event on div element via property.

xxxxxxxxxx
 
<!doctype html>
<html>
  <head>
    <style>
      body {
        padding: 0 0 0 10px;
        height: 260px;
      }
      #square {
        padding: 10px;
        height: 120px;
        width: 120px;
        border-radius: 10px;
        background: #b5edc2;
        transition: 1s;
      }
    </style>
  </head>
  <body>
    <p>Move mouse pointer onto the square:</p>
    <div id="square"/>
    <script>
      var mySquare = document.querySelector('#square');
      
      mySquare.onmouseover = function(){
        mySquare.style.height = "200px";
        mySquare.style.width = "200px";
      }
      
      mySquare.onmouseout = function(){
        mySquare.style.height = "120px";
        mySquare.style.width = "120px";
      }
    </script>
  </body>
</html>