Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
js
addEventListener("mouseover", (event) => { })
onmouseover = (event) => { }
Event type
A MouseEvent. Inherits from UIEvent and Event.
Examples
The following example illustrates the difference between mouseover and mouseenter events.
HTML
html
<ul id="test">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
JavaScript
js
const test = document.getElementById("test");
// This handler will be executed only once when the cursor
// moves over the unordered list
test.addEventListener("mouseenter", (event) => {
// highlight the mouseenter target
event.target.style.color = "purple";
// reset the color after a short delay
setTimeout(() => {
event.target.style.color = "";
}, 500);
});
// This handler will be executed every time the cursor
// is moved over a different list item
test.addEventListener("mouseover", (event) => {
// highlight the mouseover target
event.target.style.color = "orange";
// reset the color after a short delay
setTimeout(() => {
event.target.style.color = "";
}, 500);
});
Result
Specifications
| Specification |
|---|
| Pointer Events # mouseover |
| HTML # handler-onmouseover |