JavaScript Element mouseenter Event

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

Definition

In JavaScript, the mouseenter event fires when a pointing device moves so its hotspot enters the element (MDN). Paired with mouseleave, it acts much like CSS :hover. 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 mouseenter. Start with this line.

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

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

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

Parameters

ParameterDescription
Event nameRequired. "mouseenter"
Handler propOptional. onmouseenter

Return Value

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

JavaScript Examples

Example 1 — Enter Log (MDN-style)

Count how many times the pointer enters the element.

JavaScript
const box = document.getElementById("box");
const out = document.getElementById("out");
let count = 0;

box.addEventListener("mouseenter", () => {
  count += 1;
  out.textContent = "mouseenter #" + count;
});
Try It Yourself

How It Works

  1. Listen on the box. Attach mouseenter to the target element.
  2. Enter once. Count increases when the pointer first enters.
  3. Move among children. Count stays the same while still inside.
  4. Leave and re-enter. Count increases again.

Example 2 — mouseenter vs mouseover

See why over fires more often with a child inside.

JavaScript
const box = document.getElementById("box");
const out = document.getElementById("out");
let enter = 0;
let over = 0;

box.addEventListener("mouseenter", () => {
  enter += 1;
  out.textContent = "enter=" + enter + " over=" + over;
});

box.addEventListener("mouseover", () => {
  over += 1;
  out.textContent = "enter=" + enter + " over=" + over;
});
Try It Yourself

How It Works

  1. Enter the parent. Both counters often tick once.
  2. Move into a child. mouseover increases; mouseenter does not.
  3. Why? mouseover bubbles from the child; mouseenter does not.
  4. Takeaway. Prefer mouseenter for simple “entered this box” hover.

Example 3 — Pair With mouseleave

Toggle hover state like CSS :hover.

JavaScript
const box = document.getElementById("box");
const out = document.getElementById("out");

box.addEventListener("mouseenter", () => {
  out.textContent = "hovered";
});

box.addEventListener("mouseleave", () => {
  out.textContent = "idle";
});
Try It Yourself

How It Works

  1. Enter. Set UI to hovered.
  2. Stay inside children. State stays hovered (no re-fire).
  3. Leave. mouseleave resets to idle.
  4. Use case. Tooltips, card previews, hover menus.
Compatibility

Browser Support

Element mouseenter is Baseline Widely available (MDN: since July 2015). Safe for hover-style UI in modern and older evergreen browsers.

✓ Baseline · Widely available

Element mouseenter

MouseEvent when the pointer enters an element — long-established across browsers.

99% Widely available
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
mouseenter Baseline

Bottom line: Use mouseenter + mouseleave for simple hover on one element. Prefer mouseover when deep hierarchies make many enter events costly.

Frequently Asked Questions

It fires when a pointing device moves so its hotspot enters the element (MDN). Combined with mouseleave, it behaves a lot like CSS :hover for that element.
No. MDN marks Element mouseenter as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
A MouseEvent. Useful fields include clientX, clientY, relatedTarget, and modifier keys.
mouseenter does not bubble and is not sent again when the pointer moves between the element and its descendants. mouseover bubbles and fires when moving among descendants.
It follows the element’s position in the DOM tree. If a child is visually outside its parent, entering the child can still fire mouseenter on the parent (MDN).
In very deep hierarchies, listening for mouseenter on many ancestors can fire a large number of events. MDN notes that mouseover can be a better choice in those performance-sensitive cases.

Next: mouseleave

Learn the leave-side pair that resets hover UI.

mouseleave 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 mousedown Event JavaScript Element mouseleave Event