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
![](https://images.gutefrage.net/media/user/Tyldu/1568197640660_nmmslarge__0_0_160_160_7f828fad18ee7edb96b8daceedaeeadb.png?v=1568197641000)
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:
![](https://images.gutefrage.net/media/user/Tyldu/1568197640660_nmmslarge__0_0_160_160_7f828fad18ee7edb96b8daceedaeeadb.png?v=1568197641000)
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.
![](https://images.gutefrage.net/media/default/user/15_nmmslarge.png?v=1551279448000)
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?
![](https://images.gutefrage.net/media/user/regex9/1455660989427_nmmslarge__0_13_270_270_615d5a3bc6888f4c1486ce2b4d9d8f60.png?v=1455660989000)
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://images.gutefrage.net/media/user/Tyldu/1568197640660_nmmslarge__0_0_160_160_7f828fad18ee7edb96b8daceedaeeadb.png?v=1568197641000)
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
![](https://images.gutefrage.net/media/user/regex9/1455660989427_nmmslarge__0_13_270_270_615d5a3bc6888f4c1486ce2b4d9d8f60.png?v=1455660989000)
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.