HTML onmouseout Attribute

Introduction

The onmouseout attribute is an inline event handler for the mouseout event. It runs when the pointer leaves an element — or moves from the element onto a child inside it (because mouseout bubbles). Use it to hide tooltips, reset hover styles, or close menus when the user moves away. Pair it with onmouseover for enter/leave hover effects. For many hover menus, mouseleave is easier because it does not fire when moving between children. Read event.relatedTarget to see where the pointer went.

What You’ll Learn

Purpose of onmouseout Attribute

The primary purpose of onmouseout is to react when the user moves the pointer away from an element. Typical uses include resetting a highlight color, hiding a tooltip, closing a dropdown, or stopping a hover animation. It is the natural partner to onmouseover (pointer enters).

Because mouseout bubbles, a handler on a parent can fire when the pointer moves from the parent into a child. That can cause flicker in nested hover UIs — many developers prefer mouseleave instead when they only care about leaving the whole box.

📝 Syntax

Set onmouseout on any element that should respond when the pointer leaves:

<button type="button"
  onmouseover="highlight(this)"
  onmouseout="resetStyle(this)">
  Hover me
</button>

<div onmouseout="hideTooltip(event)">…</div>

Syntax Rules

• Value is JavaScript executed when the mouseout event fires.
• Works on most elements: div, button, a, etc.
• Pass event for relatedTarget (element pointer moved to).
• Pass this to reset the element that lost hover.
• The event bubbles to parent elements.
• Modern alternative: el.addEventListener("mouseout", handler).
• Consider mouseleave when child elements cause unwanted mouseout events.

💎 Values

The onmouseout attribute accepts a string of JavaScript code:

• onmouseout="resetStyle(this)" — Reset the element that fired the event.
• onmouseout="handleLeave(event)" — Inspect event.relatedTarget.
• JavaScript: box.onmouseout = () => { … } — property assignment.

panel.addEventListener("mouseout", (event) => {
  // Element the pointer moved to
  const to = event.relatedTarget;
  if (!panel.contains(to)) {
    tooltip.hidden = true;
  }
});

Applicable Elements

onmouseout vs onmouseleave vs onmouseover

Examples Gallery

Reset hover styles on leave, addEventListener with status text, and hide a tooltip when the pointer exits.

<button type="button"
  onmouseover="highlight(this)"
  onmouseout="resetStyle(this)">
  Hover me
</button>

<script>
  function highlight(el) {
    el.style.backgroundColor = "#dbeafe";
  }
  function resetStyle(el) {
    el.style.backgroundColor = "";
  }
</script>

<div id="dynamicElement">Hover over me</div>

<script>
  document.getElementById("dynamicElement").addEventListener("mouseout", function () {
    document.getElementById("log").textContent = "Mouse left the box";
  });
</script>

wrap.addEventListener("mouseout", (event) => {
  const to = event.relatedTarget;
  if (!wrap.contains(to)) {
    tooltip.hidden = true;
  }
});

♿ Accessibility

• Do not hide critical info on mouseout only — Keyboard and touch users may never trigger mouseout.
• Prefer CSS :hover for simple visual hover when no JS logic is needed.
• Ensure focusable controls — Buttons and links work with keyboard; div hovers do not.
• Tooltips need keyboard access — Use aria-describedby and focus events, not mouse only.
• Avoid hover-only menus — Provide click or keyboard paths to open navigation.

💡 Best Practices