MouseEnter und MouseLeave zielen auf mehrere Elemente auf dem lokalen Host ab ⇐ Php

[Guest]

Ich entwickle eine Website in der Kirby-Umgebung und habe sie auf localhost getestet. Eine Funktion auf dieser Website erstellt eine Hervorhebung für jedes .main-Element, das beim Bewegen der Maus eine Farbe annimmt und sich beim Verlassen der Maus wieder ändert.
Ich bin auf ein ganz bestimmtes Problem gestoßen, das beim Bewegen der Maus auftritt. Das Problem insgesamt besteht darin, dass ich versuche, auf ein Element zu zielen, aber wenn ich die Maus bewege, werden alle gleichzeitig ausgelöst.
Ich habe die Funktion in der Konsole protokolliert und es sieht so aus, als ob das Der Code erkennt tatsächlich, dass mehrere .main-Elemente ausgewählt sind.
Die Funktion funktioniert wie vorgesehen, wenn ich sie direkt aus Visual Studio Code in HTML ausführe. (Der beigefügte Screenshot stammt von dieser Version.)
Was könnte das Problem sein?

Code: Select all

[img]" alt="">

Code: Select all

document.addEventListener('DOMContentLoaded', () => {
const mainElements = document.querySelectorAll('.main');
const headerDivs = document.querySelectorAll('.container_header > div');

const generateLightColor = () => {
const randomValue = () => Math.floor(Math.random() * 156 + 100);
return `rgb(${randomValue()}, ${randomValue()}, ${randomValue()})`;
};

mainElements.forEach(main => {
const randomColor = generateLightColor();
const container = main.querySelector('.container');
const spans = main.querySelectorAll('span');

console.log("Generated random color:", randomColor);

main.addEventListener('mouseenter', () => {
container.style.backgroundColor = randomColor;
document.documentElement.style.setProperty('--color-variable', randomColor);

headerDivs.forEach(div => {
div.style.backgroundColor = randomColor;
div.style.color = container.style.color = 'black';
});

spans.forEach(span => {
span.style.backgroundColor = randomColor;
span.style.color = 'black';
});

console.log("Mouse entered main element:", main);
});

main.addEventListener('mouseleave', () => {
container.style.backgroundColor = 'var(--color-border-dark)';
headerDivs.forEach(div => {
div.style.backgroundColor = 'var(--color-border-dark)';
div.style.color = container.style.color = 'var(--default-text-color)';
});

spans.forEach(span => {
span.style.backgroundColor = 'transparent';
span.style.color = 'inherit';
});

console.log("Mouse left main element:", main);
});
});
});

Ich habe mehrere Takes ausprobiert, aber keiner davon hat zur Lösung des Problems geführt. Ein Hinweis, den ich bekam, war, dass es möglicherweise mit der dynamischen Inhaltsgenerierung und Duplikaten zu tun haben könnte.