MouseEnter и MouseLeave нацелены на несколько элементов на локальном хосте. ⇐ Php

[Anonymous]

Я разрабатываю веб-сайт в среде Kirby и тестирую его на локальном хосте. Функция на этом веб-сайте создает подсветку для каждого элемента .main, который приобретает цвет при наведении курсора и меняет цвет обратно при уходе мыши.
Я столкнулся с очень специфичной проблемой, которая возникает при наведении курсора мыши. Проблема в целом заключается в том, что я пытаюсь нацелиться на один элемент, однако при наведении мыши он запускает их все одновременно.
Я зарегистрировал функцию в консоли, и похоже, что код действительно обнаруживает несколько выбранных элементов .main.
Функция работает так, как задумано, когда я запускаю ее в HTML непосредственно из кода Visual Studio. (Прикрепленный скриншот относится к этой версии.)
В чем может быть проблема?

Код: Выделить всё

[img]" alt="">

Код: Выделить всё

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

Я пробовал несколько дублей, но ни один из них не помог решить проблему. Я понял, что это может быть связано с динамическим созданием контента и дубликатами.

Подробнее здесь: https://stackoverflow.com/questions/791 ... local-host