DIV Background Color bei Mouse-Enter zufällig ändern?
Hallo,
ich habe ein ganz normales HTML ELement und möchte, dass sich bei einem Mouse-Enter die Farbe ändert. Die Farbe soll sich zufällig durch voreingestelle Hexcodes ändern (Heist ich geb an #FF8000, #2E64FE, #F5BCA9 und er soll eine Farbe davon nehmen).
Das ganze soll KEIN Hover sein, d.h soll die Farbe bis zum nächsten Mouse-Enter bestehen bleiben.
Gibts es da ne einfache Lösung oder muss ich imch in Java-Script einarbeiten?
Technisch bin ich nicht ganz so fit.
Danke schonmal im Vorraus.
2 Antworten
dafür wirst du wohl nicht um javascript herum kommen. ist aber mit javascript alles andere als schwer. so könnte das dann in etwa dann aussehen:
du könntest diesen ganzen containern alle die selbe css klasse geben und dann alle mit
const colorChangeDivs = document.querySelectorAll(".color-change");
auswählen
dann musst du aber mit einer schleife durch die ganzen elemente durch iterieren und den onmouseenter listener für jede klasse setzten.
Sorry nochmal, ich habs grad getestet und es funktioniert irgendwie nicht.
ich geb dem div das hier:
<div class="color-change">
Und Ersetzte
const div = document.querySelector("div");
durch
const colorChangeDivs = document.querySelectorAll(".color-change");
Aber danach funktioniert das Script nicht mehr. Mache ich etwas falsch?
dann musst du aber mit einer schleife durch die ganzen elemente durch iterieren und den onmouseenter listener für jede klasse setzten.
for (let i = 0; i < colorChangeDivs.length; ++i) {
colorChangeDivs[i].addEventListener("mouseenter", function(evt) {
// code, to set color for colorChangeDivs[i] ...
});
}
https://jsfiddle.net/v4b15gju/
kann man natürlich auch noch alles etwas ordentlicher machen aber ich denke man versteht warum es nicht funktioniert wenn du nur die eine zeile ersetzt
Um auf Nutzerevents reagieren zu können, benötigst du JavaScript.
Die Werte kannst du in ein Array packen:
const colors = [ "#FF8000", "#2E64FE", "#F5BCA9" ];
Dann hängst du einen Listener an das gewünschte HTML Element, ermittelst in diesem einen zufälligen Wert aus dem Array und setzt diesen dann für die Hintergrundfarbe:
<div id="element">Some text</div>
<script>
document.getElementById("element").addEventListener("mouseenter", function(evt) {
let randomColor = colors[Math.floor(Math.random() * colors.length)];
evt.currentTarget.style.backgroundColor = randomColor;
});
</script>
Danke dir!
Wenn ich den Code seh versteh ich ihn auch, von 0 kann ich aber leider noch nicht programmieren.
Kann ich in dieser Zeile mehrere IDs verwenden:
const div = document.querySelector("div");
Denn ich hab mehrere Container auf die das angewendet werden soll, aber nicht auf alle.