Как поменять СSS-переменную для :hover через JS
 

Swiper3Dslider
весь слайдер здесь

<div class="swiper-wrapper" id="swiper-wrapper"></div>

.descrip {
	background-color:var(--color_panel_bg);     
&:hover { background-color: var(--color_panel_bg_hov);  }

	& a { 
	   & h1 {
         	       color: var(--color_text); 	         
              &:hover { color: var(--color_text_hov); } 
            }  } 
            }

// ==================== color ===================
document.querySelectorAll('.descrip a h1').forEach(el => {
	el.style.color = anyColor.randomColorHsla;  } );	 
document.querySelector('.descrip a h1').style.setProperty('--color_text_hov', anyColor.randomColorHslaHov);

// ================background-color ===================
document.querySelectorAll('.descrip').forEach(el => {
	el.style.backgroundColor = anyColor.randomColorHslaBg; } );
document.querySelector('.descrip').style.setProperty('--color_panel_bg_hov', anyColor.randomColorHslaBgHov);
	}

Вопрос только по === color === , по 3 строке. 1-2 строки работают. Там цикл, он меняет цвет случайно.
3 строки должна устанавливать цвет переменной в ('--color_text_hov', anyColor.randomColorHslaHov')

anyColor.randomColorHslaHov считается в serega3.js, считается верно и показывается в консоли , смотреть файл не надо.
файл стилей я скопировал выше, он 3dwave.css

Вопрос по этой 3 строке. Все проверил, :hover не меняется. Это же просто переменная.

получается како-то светофор, но он хоть показывает , что все СSS--переменные живы. В момент загрузки цвет берет из :root { ... } вроде правильно. И за 1s меняется . Значит , СSS--переменные живы. Потом, можно их убрать.

в рабочем цикле берется много document.querySelectorAll
в нерабочей строке document.querySelector -- здесь же просто переменная. Или я што-то не понимаю .

ПАУЗА:
прошу ее взять , если кто нашел ошибку.

Вот как считается функция , или переменная

const randomColorHslaHov = `hsla((${randomColor} + ${colorPaletteHueHov}), ${colorPaletteSat}%, ${colorPaletteLight}%, ${alphaTxt})`;

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

Вот правильное содержание anycolor

{randomColor: -12,
randomColorHsla: 'hsla(-12, 100%, 50%, 0.8)',
randomColorHslaHov: 'hsla((-12 + 50), 100%, 50%, 0.8)',
randomColorBg: 188,
randomColorHslaBg: 'hsla(188, 100%, 50%, 0.2)',
 …}

смотрю код

<h1 style="color: rgba(255, 0, 0, 0.8); --color_text_hov: hsla((0 + 50), 100%, 50%, 0.8);">Creative Lifesaver</h1>

переменная верно, какой-то цвет -- верно.
Это относится к

& h1 {
                   color: var(--color_text);            
              &:hover { color: var(--color_text_hov); }
            }  }
            }

почему так странно? . два цвета друг за другом, :hover нет ...
это так DevTools показывает ,это нормально, скажите, где :hover ??? ?

я понял , первый цвет rgba(255, 0, 0, 0.8) -- это преобразование из hsla((0 + 50), 100%, 50%, 0.8). Браузер рисует только rgba().
Тогда вопрос упрощается, где :hover ??? ?

кто понимает этот DT

не знаю , в чем проблема. Я удалил CSS для color:
Второй вопрос

document.querySelectorAll('.descrip a h1').forEach(el => { 
	el.style.color ='blue';
 
	el.addEventListener('mouseenter', () => {
		 el.style.color = 'red'; });
	el.addEventListener('mouseleave', () => {
		 el.style.color = 'yellow'; });
	} );

чуть лопухнулся, скобки не поставил, но суть вопроса не меняется -- все равно события мыши не работают.

Вопрос: как увидеть 'red' и 'yellow' ?
первые 2 строки работают, все события мыши нет.
Сайт выше. В DT все видно и можно менять.

Проблема решена. Ошибка была в том, что я был настолько уверен , на 1000% процентов , что внутри HSLA() можно проводить любые математические вычисления . А потом в виде СТРОКИ !!! отдавать для color: . А бедный JS должен всё это вычислять внутри строки ))) Я долго смотрел на эти плюсы, наверное , неделю. И только сегодня до меня дошло, что это строка , как бы она красиво не выглядела в консоли. Либо считать все снаружи в JS, либо в calc() . Проблема была там.