SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt! → Veranstaltungs-Ankündigung.

JavaScript/DOM/Event/mouseover

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Event(Weitergeleitet von Mouseover)
Wechseln zu: Navigation, Suche

Der mouseover-Event-Handler wird beim Überfahren des Elements mit der Maus ausgelöst.

bubbles

ja

cancelable

ja

mögliche Auslöser

allen Elementen außer
<base>, <bdo>, <br>, <head>, <html>,
<iframe>, <meta>, <param>, <script>,
<style>, und <title>

Event-Objekt

Maus-Event

Beispiel ansehen …
  var elem = document.getElementById('Eingabe');
  var ausgabe = document.getElementById('Ausgabe');
  elem.addEventListener('mouseover', mouseOver);
  elem.addEventListener('mouseout', mouseOut);

  function mouseOver() {
    ausgabe.innerHTML = 'Ich bin dynamisch!';
    elem.innerHTML = 'Drüber!';
  }

  function mouseOut() {
    ausgabe.innerHTML = ' ';
	elem.innerHTML = 'Wieder weg!';
  }

Der Button erhält durch addEventListener den Event-Handler mouseover zugewiesen. Der Event-Handler mouseover tritt in Aktion, wenn der Anwender die Maus über den Button bewegt, und mouseout wird aktiv, wenn er die Maus wieder herausbewegt. Mittels der Eigenschaft innerHTML können Sie mit jedem Aktivwerden eines der beiden Event-Handler den Text des Buttons dynamisch austauschen.

Beachten Sie: Viele Beispiele im Netz verwenden mouseover, um das Aussehen zu ändern. So etwas geht heute viel einfacher mit :hover allein in CSS. JavaScript ist dort nicht mehr nötig!
Ansonsten ist es empfehlenswert, pointer-Events zu verwenden, um auch Geräte ohne Maus sicher zu unterstützen.

Siehe auch

Weblinks

Events (Übersicht)
Abgerufen von „http://wiki.selfhtml.org/index.php?title=JavaScript/DOM/Event/mouseover&oldid=99772“