HTML onmouseover Attribute

Introduction

The onmouseover attribute is an inline event handler for the mouseover event. It runs when the pointer enters an element — or moves from a parent onto a child inside it (because mouseover bubbles). Use it to highlight items, show tooltips, or reveal extra info on hover. Pair it with onmouseout to reset styles when the user leaves. For simple color changes, CSS :hover is often enough. For nested menus, consider mouseenter instead to avoid extra events on child moves.

What You’ll Learn

Purpose of onmouseover Attribute

The primary purpose of onmouseover is to run code when the user moves the pointer over an element. Typical uses include applying a highlight, showing a tooltip, previewing an image, or updating a status label. It is the natural partner to onmouseout (pointer leaves).

Because mouseover 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 mouseenter when they only care about entering the whole box.

📝 Syntax

Set onmouseover on any element that should respond when the pointer enters:

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

<div onmouseover="showTip(event)">…</div>

Syntax Rules

• Value is JavaScript executed when the mouseover event fires.
• Works on most elements: div, button, a, etc.
• Pass this to style the element that received hover.
• Pass event for relatedTarget (element pointer came from).
• The event bubbles to parent elements.
• Pair with onmouseout to remove hover effects.
• Modern alternative: el.addEventListener("mouseover", handler).

💎 Values

The onmouseover attribute accepts a string of JavaScript code:

• onmouseover="highlight(this)" — Style the hovered element.
• onmouseover="showTip(event)" — Use the event object.
• JavaScript: box.onmouseover = () => { … } — property assignment.

function highlight(el) {
  el.style.backgroundColor = "#dbeafe";
  el.style.borderColor = "#3b82f6";
}

function resetStyle(el) {
  el.style.backgroundColor = "";
  el.style.borderColor = "";
}

Applicable Elements

onmouseover vs onmouseenter vs onmousemove

Examples Gallery

Highlight on enter with onmouseout reset, addEventListener status text, and show a tooltip on hover.

<div class="hover-div"
  onmouseover="changeColor(this)"
  onmouseout="resetColor(this)">
  Hover over me
</div>

<script>
  function changeColor(el) {
    el.style.backgroundColor = "lightseagreen";
  }
  function resetColor(el) {
    el.style.backgroundColor = "lightblue";
  }
</script>

<p id="dynamicElement">
  Hover over this text
</p>

<script>
  document.getElementById("dynamicElement").addEventListener("mouseover", function () {
    document.getElementById("log").textContent = "Mouseover event occurred!";
  });
</script>

trigger.addEventListener("mouseover", () => {
  tooltip.hidden = false;
  status.textContent = "Tooltip visible";
});

trigger.addEventListener("mouseout", () => {
  tooltip.hidden = true;
});

♿ Accessibility

• Do not hide critical info behind hover only — Keyboard and touch users may never trigger mouseover.
• Prefer CSS :hover for decorative styling that does not convey essential information.
• Tooltips need focus — Also show on focus and hide on blur for keyboard users.
• Avoid hover-only menus — Provide click or keyboard paths to open navigation.
• Ensure sufficient contrast on hover states for readability.

💡 Best Practices