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

[serega_da]

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

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

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

Скрипт из вопроса находится в папке js/…/show,js
здесь сборка кучки

в массив. Массив собран в один div по ID
<div class="swiper-wrapper" id="swiper-wrapper"></div>
В index.html этот " id=“swiper-wrapper” цвет в CSS-переменной по умолчанию.

Но в самом index.html я просто закоментил color: , т.е. вообще. Пусть color: ставит только скрипт .
И пока это работает. Даже был там раньше этот color: с CSS-переменной, так это нечего не меняет.

Результат работы: цикл работает, цвет устанавливается.
‘mouseover’, ‘mouseout’, – не работает.
Но если закоментить 2 строку, то цвет становится по установке из CSS. И начинает работать одно событие: либо ‘mouseover’, либо ‘mouseout’.
Почему такое странное поведение ?
Получится или нет? Или здесь нарушены принципы JS ?
Swiper3Dslider

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

[AlexP]

Так вот “на любом сайте” работает.

Видимо дело в конкретном сайте.

Потому и просят codepen/replit/jsfiddle/… с минимальным воспроизводимым примером )

[Двойкин]

У меня вопрос - а зачем это нужно, именно так раскрашивать ссылку?

[serega_da]

Алекс, ты издеваешься , это прикол ? Нажми ссылку !!
Почему я сам, ,свой сайт прекрасно смотрю в DevTools

У меня такая структура, уже все готово. Как я тебе внешний файл моих самописных скриптов засуну в в Кодепен ? Как мне их менять ? Где-то есть песочница, внешними фалами , которые видны. Так она полностью копирует DevTools ! Или VSCode . Зачем не делать дурную работу , если DevTools – это и есть та же песочница, только мощнее в 10 раз. Какая песочница тебе покажет стили, или содержимое переменной ?
Или я чего-то не знаю про ваш Кодепен ?
Даже VSCode я как-то не привык еще к нему… У меня файлы в папке. Я их редактирую в БЛОКНОТЕ, стоит прога GoodSynk. Она автоматом сама любые изменения сразу льет на хостинг.

Если что по мелочи изменить-проверить, открываю свой хостинг в DT и там МЕНЯЮ. Да, надо жать Crtl-S и обновлять , зато не приходится гадать , а что внутри переменных, как в Кодепене.

“минимальным воспроизводимым примером” – целый рабочий сайт к твоему распоряжению

я понял, в целом ты прикольно сделал. Да, любая ссылка работает именно так , как в вопросе.
У меня в коде случайные цвета со смещением. В вопрос “red lbu yellow” – для упрощения.
Люблю все случайное, и ничего плохого в это н вижу. В коде сайта, есть коэффициент, если его поставить 0, будет тот цвет, как ты выберешь.
В принципе ты показал, что в чистом коде работает. А на этом сайте нет. В этом и проблема.

Тогда тем более , Кодепен к вопросу не подходит

[AlexP]

@serega_da

Нажми ссылку

Я не понял что там где должно меняться, там вообще нет элементов по тому селектору.

[AlexP]

Если убрать .name, то так же работает.

[serega_da]

Алекс Я понял, что-то совсем упростил. Я этот name поставил , думал ответ сразу будет, чисто из-за неправильного синтаксиса или еще чего.

правильный класс
.descrip a h1 {}

Стили в файле 3Dwave.css
Так это ничего не меняет.

anyColor.randomColorHsla =
‘hsla(-18, 100%, 50%, 0.8)’ – это правильно.
anyColor.randomColorHslaHov =
‘hsla(-18 + 50, 100%, 50%, 0.8)’ – это правильно.

Если тебя мешают переменные, в этом же DT напиши red blue yellow цвета , для теста, и все будет сохраняться. Пиши не снизу, а прямо в файлах

DevTools - Sourse - Overrides - ПЛЮС – Выбираешь любую папку на компе.
Эти 3 файла, ПКМ, Override.
3Dwave.css , index.html, show.js
Все . Эти файлы твои и меняешь их как хочешь. В первых 3Dwave.css , index.html – ничего интересного нет.

[AlexP]

@serega_da

в этом же DT напиши red blue yellow цвета , для теста, и все будет сохраняться.

Так тут проблема похоже именно со значениями цветов.
blue/red/yellow работает, а с тем, что в anyColor.randomColorHsla, видимо что-то не так и оно не меняет цвет.

[serega_da]

как не меняет ? При загрузке страницы именно эти цвета и записываются в color: скриптом
Алекс, а ты прав !!! Да я это же вроде делал раньше , прямо на сайте. Не мог я токого пропустить. Воя тормоз, даже не попробовал у себя … Точно. Простые цвета пишутся … И в чем дело ?
Да я уже давно знаю. что то не так – при паузе, когда страница уже давно загрузилась, все работает по другом, чем при живой загрузке. Это что-то с очередностью скриптов, но я в этом не шарю , с этими очередями
там же все просто , одновременно с anyColor.randomColorHsla = hsla(16, 100%, 50%, 0.8)
считается anyColor.randomColorHslaHov = hsla(16 + 50, 100%, 50%, 0.8) , просто прибавляется цифра с потолка к Hue. И скобки там стояли, ничего не меняет это .

[serega_da]

Алекс, вообще жесть какая то . Я вернул назад все как было , с переменными.
Теперь четко срабатывает “mouseover”, но НЕ работает “mouseout”.
После 10 обновлений эти события поменялись местами – работает одно из двух.
У тебя так же ? Я не знаю, тут проблема именно в одновременной работе этих 3 строк. Т.е. 2 строка не прекращает свою работу . Я прав ?
А при загрузке ставится

:root {
	--color_text: hsla( 100, 100%, 50%, 1.0);

это зеленый типа “салат”. Интересно, откуда он ставится , если сам color в 3Dwave.css закрыт, вместе с переменой.
Вообще не понятно. Нет, не закрыт, но это не важно, ты можешь сам все закрыть и открыть .
Куда пропадают скрипты ?

[serega_da]

я подумал, что второй цикл для background-color тоже имеет элемент el. Может, конфликтует , Сделал так:

document.querySelectorAll('.descrip').forEach(elbg => {
	elbg.style.backgroundColor = anyColor.randomColorHslaBg;
	elbg.addEventListener('mouseover', () => {
		elbg.style.backgroundColor = anyColor.randomColorHslaBgHov; });
	elbg.addEventListener('mouseout', () => {
		elbg.style.backgroundColor = anyColor.randomColorHslaBg; });
	} );

это тоже ничего не изменило

[serega_da]

На мышь эта панель не реагирует. Можно backround убрать , хоть бы с текстом разобраться

[AlexP]

Так я ж говорю, дело в значении цвета. Оно некорректное и не применяется.

Наверно дело в попытке сложить числа: hsla(-22 + 50, 100%, 50%, 0.8)
Так вроде нельзя, надо calc() - CSS: Cascading Style Sheets | MDN
Ну или сразу вычислить в JS.

[serega_da]

алекс , спсибо, Ты абсолютно прав, я привык , что в JS все везде можно сложить и разделить . Проверил, точно не складывается. А я неделю искал другую проблему. Благодарю, неделя закончилась )))

[serega_da]

посмотрел еще раз – я отдавал этому color: СТРОКУ “HSLA()” отдавал в CSS , какие там вычисления без calc() ??? Спасибо, понял