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

Question

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

serega dushka Знаток (393), на голосовании 3 месяца назад

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, в котором внешние файлы посмотреть нельзя.
(комменты разрешены !)

Как запустить эти несчастные события мыши ?

Answer 1

Павел Просветленный (25616) 4 месяца назад

Как правильно задать цвет: для текста или для ссылки?
Действие «mouseenter» на текст или вокруг ссылки?
Это вообще рабочий проект?

Всё стили/события прописываются только элементу. Указав свойство color для ссылки, меняется цвет текста внутри этой ссылки. Если вопрос про то задать ли свойство цвета элементу <a> или элементу <h1>, то это зависит от твоей цели. Если ни с чем не конфликтует, то можешь задавать стиль любому из этих элементов.
Повторяю - нельзя задать стили/события конкретно для текста. И что вообще значит "вокруг ссылки"?
Вообще не понятна в чём суть твоей претензии. Код работает.

Если ты модифицируешь существующий сайт и цвета не меняются, то смотри что конфликтует со стилями сайта во вкладке style.

serega dushkaЗнаток (393) 4 месяца назад

Коллега ты абсолютно прав. тут странная ситуация. этот скрипт работает как то ненадежно. ощущение что там все строки конфликтуют между собой.
когда устанавливается простые цвета . синий красный желтый . это действительно работает . я вижу ты знаком с Devtools, если ты откроешь show.js ,
там костанты цвета. работают правильно . если вести их снизу и увидишь что они выдают правильный цвет . вот именно этот код и не работает . цвет устанавливается случайный . это правильно (это работвет 2 строка ). но по события мыши -- они либо вообще не работает. либо работает по очереди . тут надо смотреть как работает цикл. похожие все 3 строки работать одновременно. или все константы срабатывают по 1 разу. потом их что то сбрасывает.это мои догадки. я не знаю как это разделить по своей очереди

serega dushkaЗнаток (393) 4 месяца назад

все верно. чтобы без конфликтов . я вообще убрал color из 3dwave.css .но это не меняет ничего..теперь скрипты конфликтуют меджу собой. получаетсячто 2 строка работает постоянно. или как ?

serega dushkaЗнаток (393) 4 месяца назад

вроде бы уже простая задача. обычный ховер через скрипт

Павел Просветленный (25616) serega dushka, завтра. Я спать.

serega dushkaЗнаток (393) 4 месяца назад

Коллега , я решил проблему и я готов поделиться с тобой, в чем причина. но у меня уже накопилась куча вопросов
1. где кнопка решения ? я же ее видел
2. у тебя 1 и 2 ответ между собой противоречат

3. я имел ввиду, что ссылка всегда обрамляет текст, поэтому она снаружи .так на что же ставить событие : на ссылку , которая снаружи , или текст который внутри ?

4 . вот ты видишь : на твоей же картинки желтый текст , бирюзовый ... а что это хрень бирюзовая сзади ? это текст, ссылка ? что это за хрень бирюзового цвета ?

Павел Просветленный (25616) serega dushka, 1-й и 2-й ответы не противоречат. Это просто формальность. Ты применяешь стили не к тексту а к элементу. Текст является частью элемента. В общем не бери в голову.

Встречный вопрос к тебе. Каким образом ты собираешься добавить событие к тексту? CSS не имеет селектора для текста и textNode не имеет метода addEventListener.
Это элемент DIV, который содержит твою ссылку. К нему применён стиль background-color (то есть "фоновый цвет").

Я утром тщательно глянул код данной страницы и заметил проблему. Объект anyColor содержит неверные значения для цвета.

А именно значение HUE неверно просчитано. Смотри фото:

То есть тут должно быть одно значение от 0 до 360. В одном параметре отрицательное значение а в другом вообще выражение "202 + 50".