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 StandardThe 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.
Update compatibility data on GitHub
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
GlobalEventHandlers.onmousemove by Mozilla Contributors is licensed under CC-BY-SA 2.5.