Zum Inhalt springen

Mouse-Events: Bewegung und Hover

Schritt 3 von 7

Nun, um den Mauszeiger auszutricksen, können wir das 'mouseout'-Event nutzen. Dieses Ereignis wird ausgelöst, wenn der Mauszeiger von einem Element wegfährt. Versuchen wir, eine kurze Nachricht in der Konsole auszugeben, wenn der Mauszeiger das Element verlässt.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Mouse-Events</title>
</head>
<body>
<div id="mouseArea" style="width:200px; height:200px; background-color:lightblue; text-align:center; line-height:200px; font-size:24px;">
Über mich heben
</div>
</body>
<script>
document.getElementById('mouseArea').addEventListener('mouseout', function() {
console.log('Maus verlässt das Element');
});
</script>
</html>