HTML onmouseout Event Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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>