GlobalEventHandlers.onmousemove
The onmousemove
property of the
GlobalEventHandlers
mixin is an event handler 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 |
---|
HTML Standard # handler-onmousemove |
Browser compatibility
BCD tables only load in the browser
See also
mousemove
event