JS: одновременная установка свойства CSS и события «mouseover/mouseout»

document.querySelectorAll('.name a h1').forEach(el => {
el.style .color = 'blue';

el.addEventListener('mouseover', () => {
el.style .color = 'red'; });
el.addEventListener('mouseout', () => {
el.style .color = 'yellow'; });
});
Как правильно задать цвет: для текста или для ссылки?
Действие «mouseenter» на текст или вокруг ссылки?
Это вообще рабочий проект?
Результат работы: цикл работает, цвет устанавливается.
‘mouseover’, ‘mouseout’, – не работает.
Но если закоментить 2 строку, то цвет становится по установке из CSS. И начинает работать одно событие: либо ‘mouseover’, либо ‘mouseout’.
Почему такое странное поведение ?
Получится или нет? Или здесь нарушены принципы JS ?
Swiper3Dslider

все воспроизводится. Используйте DevTools , Overrides . В Overrides можно все смотреть, менять, тестировать. Относится к любому сайту. А то все хотят Codepen, в котором внешние файлы посмотреть нельзя.
Как запустить эти несчастные события мыши ?