HTML onmousemove 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 onmousemove HTML event attribute is used to specify a JavaScript function that is executed when the user moves the mouse pointer over an element. It is a supported attribute for all HTML elements, except for <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, and <style>.

The onmousemove attribute can be used to create a variety of interactive effects, such as changing the appearance of an element when the user hovers over it, displaying a tooltip, or even playing a sound.

Here is an example of how to use the onmousemove attribute:

<div id="myDiv" onmousemove="changeColor(this)">Hover over me to change my color!</div>

The changeColor() function is a JavaScript function that changes the background color of the element with the ID myDiv to a random color.

Here is an example of the JavaScript function:

function changeColor(element) {
  element.style.backgroundColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
}

When the user moves the mouse pointer over the element with the ID myDiv, the changeColor() function will be executed, changing the background color of the element to a random color.

The onmousemove event attribute can be used to create a variety of other interactive effects, such as:

Displaying a tooltip when the user hovers over an element
Playing a sound when the user hovers over an element
Highlighting a menu item when the user hovers over it
Moving an object around the screen when the user moves the mouse pointer
Changing the appearance of an image when the user hovers over it

Syntax

<element onmousemove="script">

Values

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

Example

HTML

<!DOCTYPE html> 

  <html> 

    <head>

      <title>onmousemove event</title> 

      <style> 

      img {

        width: 60px;

        height: 60px;

      }

      </style> 

    </head> 

    <body> 

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

    <img onmousemove="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>