JavaScript Element mouseover Event

Beginner
5 min read
Updated: Nov 2026
3 examples
Event
Decorative image with the word MOUSEOVER

Definition

In JavaScript, the mouseover event fires when a pointing device moves the cursor onto an element or one of its child elements (MDN). It bubbles. The event type is a MouseEvent.

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for mouseover. Start with this line.

JavaScript
element.addEventListener("mouseover", (event) => { … })
CallWhat it does
element.addEventListener("mouseover", (event) => { … })Primary signature.

Built into the browser. Listen with el.addEventListener("mouseover", …) — no import required.

Library declarations
JavaScript
element.addEventListener("mouseover", (event) => { … })

Parameters

ParameterDescription
Event nameRequired. "mouseover"
Handler propOptional. onmouseover

Return Value

Return ValueDescription
*Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Log the Entered Target

See which element received the pointer — including children.

JavaScript
const stage = document.getElementById("stage");

stage.addEventListener("mouseover", (event) => {
  console.log("mouseover on", event.target.tagName.toLowerCase());
});
Try It Yourself

How It Works

  1. Listen on a parent. Events from children bubble up.
  2. Read target. event.target is the actual element under the pointer.
  3. Expect noise. Moving among children fires again and again.
  4. Need quieter enter? Prefer mouseenter for whole-element hover.

Example 2 — Count mouseover vs mouseenter

MDN idea: move among children — over rises, enter stays put.

JavaScript
const parent = document.getElementById("parent");
let overCount = 0;
let enterCount = 0;

parent.addEventListener("mouseover", () => {
  overCount++;
  console.log("mouseover=", overCount, "mouseenter=", enterCount);
});

parent.addEventListener("mouseenter", () => {
  enterCount++;
  console.log("mouseover=", overCount, "mouseenter=", enterCount);
});
Try It Yourself

How It Works

  1. Attach both listeners. Same parent, two different enter models.
  2. Enter once. First move into the parent increments mouseenter.
  3. Over many times. Crossing child boundaries increments mouseover.
  4. Takeaway. Use over for per-child work; enter for whole-box hover.

Example 3 — Delegate to List Items

One parent listener highlights whichever LI the pointer enters.

JavaScript
const list = document.getElementById("list");

list.addEventListener("mouseover", (event) => {
  if (event.target.tagName !== "LI") return;
  console.log("over", event.target.textContent);
});
Try It Yourself

How It Works

  1. One listener. Bubbling makes parent-level handlers work.
  2. Filter target. Ignore events that are not on an LI.
  3. React per child. Useful for menus, tables, and dynamic lists.
  4. Pair with mouseout if you need leave cleanup for each item.
Compatibility

Browser Support

Element mouseover is Baseline Widely available (MDN, since July 2015). It is a standard MouseEvent — not Deprecated, Experimental, or Non-standard.

✓ Baseline · Widely available

Element mouseover

Fires when the pointer enters an element or its children. Bubbles — unlike mouseenter.

99% Modern browser support
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
mouseover Excellent

Bottom line: Safe everywhere students build today. Prefer mouseenter for simple hover; use mouseover for delegation and per-child enter.

Frequently Asked Questions

It fires when a pointing device moves the cursor onto an element or one of its child elements (MDN).
No. MDN marks Element mouseover as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
A MouseEvent (inherits from UIEvent and Event). Useful fields include relatedTarget, clientX, clientY, and target.
mouseover bubbles and also fires when moving onto child elements (or among child boundaries). mouseenter does not bubble and fires only when entering the element and its descendant tree as a whole (MDN).
For whole-component hover enter without descendant noise, MDN notes mouseenter/mouseleave are usually more sensible than mouseover/mouseout.
When you want bubbling/delegation, or when you care about entering individual children (for example highlighting each list item as the pointer moves over it).

Next: mouseup

Learn the Element event that fires when a mouse button is released.

mouseup tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element mouseout Event JavaScript Element mouseup Event