HTML onmouseover Event Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The onmouseover HTML event attribute is used to specify a JavaScript function that will be executed when the mouse pointer enters the element. It is one of the many event attributes that can be used to add interactivity to HTML elements.

The onmouseover attribute can be used on any HTML element, except for <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>.

To use the onmouseover attribute, simply add it to the element in question and assign it the name of the JavaScript function that you want to be executed. For example, the following code will cause an alert popup to appear when the user hovers their mouse over the <p> element:

<p onmouseover="alert('Hello, world!')">This is a paragraph.</p>

The onmouseover attribute is often used together with the onmouseout attribute, which is used to specify a JavaScript function that will be executed when the mouse pointer leaves the element. For example, the following code will cause the background color of the <div> element to change to red when the user hovers their mouse over it, and then change back to white when the user moves their mouse away:

<div onmouseover="this.style.backgroundColor = 'red'" onmouseout="this.style.backgroundColor = 'white'">This is a div.</div>

The onmouseover attribute is a powerful tool that can be used to add interactivity to your HTML pages. It is easy to use and can be combined with other event attributes to create complex and sophisticated effects.

Syntax

<element onmouseover="script">

Values

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

Example

HTML

<!DOCTYPE html> 

  <html> 

    <head>

      <title>onmouseover event</title> 

      <style> 

      img {

        width: 60px;

        height: 60px;

      }

      </style> 

    </head> 

    <body> 

    <p>To demonstrate the onmouseover 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

Editor

Browser Support

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