At once setting of the CSS property and the event "mouseover/mouseout"

[serega]

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

     el.addEventListener('mouseenter', () => {
         el.style.color = 'red';  });
     el.addEventListener('mouseleave', () => {
         el.style.color = 'yellow';  });
 });

1. How to set a color correctly: for a text or for a link?
2. 'mouseenter' act on a text or around link ?
3. Is this even a working design?

will it work or not? Or are the principles of JS violated here ?

If "to comment" 2 line, then working only 'mouseout' . Why ?
At the same time, in different situations, without 2 line, work either 'mouseenter' or 'mouseleave' turn on.
I can't understand the system.

(picture - is slider, for a beauty)

Swiper3Dslider All is reproduced. see in DevTools, use OVERRIDES . file --- show.js

 

[serega]

right class
.descrip a h1 {}