HTML onmouseover Event Attribute

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>