The onmousemove
property of the GlobalEventHandlers
mixin is an EventHandler
that processes mousemove
events.
The mousemove
event fires when the user moves the mouse.
Syntax
target.onmousemove = functionRef;
Value
functionRef
is a function name or a function expression. The function receives a MouseEvent
object as its sole argument.
Examples
Tooltips
This example creates link tooltips that follow your mouse. It uses the onmousemove
, onmouseover
, and onmouseout
event handlers.
HTML
<p><a href="#" data-tooltip="First link">See a tooltip here …</a></p> <p><a href="#" data-tooltip="Second link">… or here!</a></p>
CSS
.tooltip { position: absolute; z-index: 9999; padding: 6px; background: #ffd; border: 1px #886 solid; border-radius: 5px; }
JavaScript
const tooltip = new (function() { const node = document.createElement('div'); node.className = 'tooltip'; node.setAttribute('hidden', ''); document.body.appendChild(node); this.follow = function(event) { node.style.left = event.clientX + 20 + 'px'; node.style.top = event.clientY + 10 + 'px'; }; this.show = function(event) { node.textContent = event.target.dataset.tooltip; node.removeAttribute('hidden'); }; this.hide = function() { node.setAttribute('hidden', ''); }; })(); const links = document.querySelectorAll('a'); links.forEach(link => { link.onmouseover = tooltip.show; link.onmousemove = tooltip.follow; link.onmouseout = tooltip.hide; });
Result
Draggable elements
We also have an example available showing the use of the onmousemove
event handler with draggable objects — view the example in action.
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'onmousemove' in that specification. |
Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
onmousemove | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
See also
mousemove
event