Element: mouseover-Ereignis

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Das mouseover-Ereignis wird bei einem Element ausgelöst, wenn der Cursor mit einem Zeigegerät (z. B. einer Maus oder einem Trackpad) auf das Element oder eines seiner Kindelemente bewegt wird.

Wenn das Zielelement Kindelemente hat, werden mouseout- und mouseover-Ereignisse auch ausgelöst, wenn die Maus die Grenzen dieser Elemente überquert, und nicht nur die Grenze des Zielelements selbst. Das Verhalten der Ereignisse mouseenter und mouseleave ist in der Regel besser geeignet, da sie nicht durch das Bewegen des Cursors auf Kindelemente beeinflusst werden.

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

addEventListener("mouseover", (event) => { })

Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:

onmouseover = (event) => { }

<ul id="test">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

JavaScript

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);
});