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);
});
});
});