In diesem Schritt lernst du, wie du mit den Mouse-Events in JavaScript umgehen kannst, um interaktive Elemente zu erstellen. Mouse-Events sind spezielle Ereignisse, die auf einem HTML-Element aufgetreten sind, und sie können mit JavaScript behandelt werden, um die Seite interaktiv zu machen. Ein typisches Beispiel dafür ist das 'hover'-Event, das ausgelöst wird, wenn der Mauszeiger über ein Element bewegt wird. Lass uns mit einem einfachen Beispiel beginnen, um zu verstehen, wie wir dies umsetzen können.
<!-- HTML-Code -->
<!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>
// JavaScript-Code
document.getElementById('mouseArea').addEventListener('mouseover', function() {
console.log('Maus bewegt sich über das Element');
});
</script>
</html>