HTML onmousemove Event Attribute

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

<!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>

Browser Support

The following table will show you the current browser support for the HTML onmousemove Event Attribute.

Desktop
Edge Chrome Firefox Opera Safari
YesYesYesYesYes
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
YesYesYesYesYesYes

Last updated by CSSPortal on: 13th October 2023