1 Frage zu Mouseover

Question

Wie füge ich einem li-Element in HTML ein Mouseover hinzu?

Accepted Answer

Um einem `<li>`-Element in HTML einen Mouseover-Effekt hinzuzufügen, kannst du JavaScript oder CSS verwenden. Hier sind zwei einfache Methoden: ### Mit CSS: Du kannst den `:hover`-Pseudo-K... [mehr]

Accepted Answer

Um einem `<li>`-Element in HTML einen Mouseover-Effekt hinzuzufügen, kannst du JavaScript oder CSS verwenden. Hier sind zwei einfache Methoden: ### Mit CSS: Du kannst den `:hover`-Pseudo-Klassen-Selektor verwenden, um den Stil des `<li>`-Elements zu ändern, wenn die Maus darüber fährt. ```html <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mouseover Beispiel</title> <style> li { padding: 10px; list-style-type: none; } li:hover { background-color: lightblue; /* Hintergrundfarbe ändern bei Mouseover */ cursor: pointer; /* Zeiger ändern */ } </style> </head> <body> <ul> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> </ul> </body> </html> ``` ### Mit JavaScript: Wenn du eine Funktion ausführen möchtest, wenn die Maus über das `<li>`-Element fährt, kannst du JavaScript verwenden. ```html <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mouseover Beispiel</title> <style> li { padding: 10px; list-style-type: none; } </style> </head> <body> <ul> <li onmouseover="changeColor(this)" onmouseout="resetColor(this)">Element 1</li> <li onmouseover="changeColor(this)" onmouseout="resetColor(this)">Element 2</li> <li onmouseover="changeColor(this)" onmouseout="resetColor(this)">Element 3</li> </ul> <script> function changeColor(element) { element.style.backgroundColor = 'lightblue'; // Hintergrundfarbe ändern } function resetColor(element) { element.style.backgroundColor = ''; // Hintergrundfarbe zurücksetzen } </script> </body> </html> ``` Beide Methoden ermöglichen es dir, einen Mouseover-Effekt für `<li>`-Elemente zu erstellen. Wähle die Methode, die am besten zu deinen Anforderungen passt.

1 Frage zu Mouseover

Fragen und Antworten zum Thema Mouseover

Wie füge ich einem li-Element in HTML ein Mouseover hinzu?