Javascript.RU

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

Как поменять С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.
Ответить с цитированием
  #2 (permalink)  
Старый 10.07.2024, 20:08
Новичок на форуме
Отправить личное сообщение для seregadushka Посмотреть профиль Найти все сообщения от seregadushka
 
Регистрация: 10.07.2024
Сообщений: 9

получается како-то светофор, но он хоть показывает , что все СSS--переменные живы. В момент загрузки цвет берет из :root { ... } вроде правильно. И за 1s меняется . Значит , СSS--переменные живы. Потом, можно их убрать.
Ответить с цитированием
  #3 (permalink)  
Старый 10.07.2024, 20:14
Новичок на форуме
Отправить личное сообщение для seregadushka Посмотреть профиль Найти все сообщения от seregadushka
 
Регистрация: 10.07.2024
Сообщений: 9

в рабочем цикле берется много document.querySelectorAll
в нерабочей строке document.querySelector -- здесь же просто переменная. Или я што-то не понимаю .
Ответить с цитированием
  #4 (permalink)  
Старый 10.07.2024, 21:18
Новичок на форуме
Отправить личное сообщение для seregadushka Посмотреть профиль Найти все сообщения от seregadushka
 
Регистрация: 10.07.2024
Сообщений: 9

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

Вот как считается функция , или переменная
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)',
 …}
Ответить с цитированием
  #5 (permalink)  
Старый 11.07.2024, 16:59
Новичок на форуме
Отправить личное сообщение для seregadushka Посмотреть профиль Найти все сообщения от seregadushka
 
Регистрация: 10.07.2024
Сообщений: 9

смотрю код
<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 ??? ?

Последний раз редактировалось seregadushka, 11.07.2024 в 17:03.
Ответить с цитированием
  #6 (permalink)  
Старый 11.07.2024, 17:10
Новичок на форуме
Отправить личное сообщение для seregadushka Посмотреть профиль Найти все сообщения от seregadushka
 
Регистрация: 10.07.2024
Сообщений: 9

я понял , первый цвет rgba(255, 0, 0, 0.8) -- это преобразование из hsla((0 + 50), 100%, 50%, 0.8). Браузер рисует только rgba().
Тогда вопрос упрощается, где :hover ??? ?
Ответить с цитированием
  #7 (permalink)  
Старый 11.07.2024, 17:59
Новичок на форуме
Отправить личное сообщение для seregadushka Посмотреть профиль Найти все сообщения от seregadushka
 
Регистрация: 10.07.2024
Сообщений: 9

кто понимает этот DT
Ответить с цитированием
  #8 (permalink)  
Старый 12.07.2024, 06:25
Новичок на форуме
Отправить личное сообщение для seregadushka Посмотреть профиль Найти все сообщения от seregadushka
 
Регистрация: 10.07.2024
Сообщений: 9

не знаю , в чем проблема. Я удалил 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 все видно и можно менять.

Последний раз редактировалось seregadushka, 12.07.2024 в 21:55. Причина: скобки
Ответить с цитированием
  #9 (permalink)  
Старый 15.07.2024, 15:28
Новичок на форуме
Отправить личное сообщение для seregadushka Посмотреть профиль Найти все сообщения от seregadushka
 
Регистрация: 10.07.2024
Сообщений: 9

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как через JS задать ширину родителя как у ребенка? ethereal Элементы интерфейса 6 13.01.2020 11:05
Нужно поменять библиотеку JS для плагина WP PoMka Работа 0 25.02.2014 11:19
Как с помощью js поменять содержимое content у псевдоэлементов before и after? grifangel Общие вопросы Javascript 3 17.10.2013 21:11
Как указать title при открытии окна через window.open для chrome milvic Opera, Safari и др. 4 15.01.2011 15:18
Как вызвать OpenDialog через JS? Некто Элементы интерфейса 6 26.11.2009 14:17