Beispiel:JS-Event-onmouseenter.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css" /> <title>Beispiel: onmouseenter Event</title>
</head>
<body>
Beispiel: onmouseenter Event
onmouseleave
<main>
Bewege die Maus auf den Button und wieder weg, um den Event-Handler in Aktion zu sehen:
<button id="Eingabe" type="button">Komm mit der Maus
zu mir!</button>
</main>
<script>
var elem = document.getElementById("Eingabe");
var ausgabe = document.getElementById("Ausgabe");
elem.addEventListener("mouseenter", mouseEnter);
elem.addEventListener("mouseleave", mouseLeave);
function mouseEnter() {
ausgabe.innerHTML = 'Ich bin dynamisch!';
ausgabe.style.color = "red";
elem.innerHTML = 'Enter!
(Drüber)'; }
function mouseLeave() {
ausgabe.innerHTML = 'Wieder weg!';
ausgabe.style.color = "black";
elem.innerHTML = 'Leave!
(wieder weg!)';
}
</script> </body> </html>
