HTML onmouseout Event Attribute

☕

Enjoying this site?

Help keep it running with a small coffee donation. Every bit of support is appreciated!

onmouseout

HTML Event AttributeThis event attribute is supported by all modern browsers.

Updated 13th October 2023

Description

The onmouseout HTML event attribute specifies a script to be run when the mouse pointer moves out of an element. It is one of the many event attributes that can be used to add interactivity to web pages.

The onmouseout event is often used together with the onmouseover event, which is fired when the mouse pointer moves over an element. This allows you to create different effects when the user hovers over and off of an element.

For example, you could use the onmouseout event to change the background color of a button when the user moves the mouse away from it. Or, you could use it to hide a tooltip when the user moves the mouse away from the element that triggered it.

To use the onmouseout event attribute, simply add it to the element you want to listen for the event on. The value of the attribute should be a JavaScript expression that will be executed when the event occurs.

For example, the following code will change the background color of a button to red when the user moves the mouse away from it:

<button onmouseout="this.style.backgroundColor = 'red'">Click me!</button>

You can also use the onmouseout event attribute to trigger more complex actions, such as making an AJAX request or updating the state of your web application.

Here is an example of how to use the onmouseout event attribute to hide a tooltip:

<div id="tooltip">This is my tooltip!</div>

<img src="image.png" alt="Image" onmouseout="document.getElementById('tooltip').style.display = 'none'">

When the user moves the mouse away from the image, the tooltip will be hidden.

Syntax

<element onmouseout="script">

Values

scriptThe name of the script to use when the event has been triggered.

Example

HTML

<!DOCTYPE html> 

  <html> 

    <head>

      <title>onmouseout event</title> 

      <style> 

      img {

        width: 60px;

        height: 60px;

      }

      </style> 

    </head> 

    <body> 

    <p>To demonstrate the onmouseout event attribute, hover over the image:</p>

    <img onmouseover="enlarge(this)" onmouseout="normal(this)" src="2.png" alt="CSS"> 

    <p>After you remove the mouse pointer from the image, a script will be run that is set to the onmouseout event attribute, which will return the original image size.</p>

<script> 

function enlarge(x) {

  x.style.height="120px"; 

  x.style.width="120px";   

} 

function normal(x) {

  x.style.height="60px"; 

  x.style.width="60px";   

} 

</script> 

  </body> 

</html>

Result

Open in editor

Browser Support

The following information will show you the current browser support for the HTML onmouseout event attribute. Hover over a browser icon to see the version that first introduced support for this HTML event attribute.

This event attribute is supported by all modern browsers.