Beispiel:JS-Event-onmouseover.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html> <head> 

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0;" />
 <link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:Grundlayout.css" />
 <style>

h1 span { 

 margin-left: 4.5em;
 }  
 </style>
 <title>Beispiel: mouseover Event-Handler</title>

</head>

<body>

Beispiel: mouseover Event-Handler

 <main>

Bewege die Maus auf den Button und wieder weg, um den Event-Handler in Aktion zu sehen:

   <button id="Eingabe" type="button">Klick mich!</button>


 </main>

<script> 

 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!'; 

 }

</script> </body> </html>

Abgerufen am 23.09.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:JS-Event-onmouseover.html"