Показать сообщение отдельно
  #1 (permalink)  
Старый 10.07.2024, 20:00
Аватар для seregadushka
Аспирант
Отправить личное сообщение для seregadushka Посмотреть профиль Найти все сообщения от seregadushka
 
Регистрация: 10.07.2024
Сообщений: 39

Как поменять С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 не меняется. Это же просто переменная.

Последний раз редактировалось seregadushka, 12.07.2024 в 10:44.
Ответить с цитированием