JavaScript/DOM/Event/mouseenter

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Event-Handler DOM 2.0 mouseenter
Bedeutung wird beim Überfahren des Elements mit der Maus ausgelöst. Wenn die Maus das Element wieder verlässt, wird mouseleave ausgelöst.
bubbles nein
cancelable nein
Elternelemente Darf vorkommen in: allen Elementen außer
<base>, <bdo>, <br>, <head>, <html>,
<iframe>, <meta>, <param>, <script>,
<style>, und <title>
Event-Objekt Maus-Event
Browsersupport
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel

Der Button erhält durch addEventListener die Event-Handler mouseenter und mouseleave zugewiesen. Der Event-Handler mouseenter tritt in Aktion, wenn der Anwender die Maus über den Button bewegt, und mouseleave 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.

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!';
  }
Beachten Sie

Anders als bei mouseover steigt dieser Event-Handler nicht auf (Event-Bubbling).[1]

Beachten Sie: Der mouseenter-Event-Handler wird von Safari nicht unterstützt. Benutzen Sie in diesem Fall mouseover.
Beachten Sie: Der mouseenter-Event-Handler wird nicht durch drag und drop ausgelöst. Benutzen Sie in diesem Fall dragenter.
Tipp
Empfehlung: einen ähnlichen Effekt können Sie ganz ohne JavaScript mit :hover erreichen.
Quellen
  1. MDN: mouseenter
siehe auch

{{{siehe_auch}}}

Weblinks

{{{Weblinks}}}

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML