![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
10.07.2024, 20:00
|
![Аватар для seregadushka](https://javascript.ru/forum/image.php?u=102511&dateline=1725278277) |
Аспирант
|
|
Регистрация: 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.
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
10.07.2024, 20:08
|
![Аватар для seregadushka](https://javascript.ru/forum/image.php?u=102511&dateline=1725278277) |
Аспирант
|
|
Регистрация: 10.07.2024
Сообщений: 39
|
|
получается како-то светофор, но он хоть показывает , что все СSS--переменные живы. В момент загрузки цвет берет из :root { ... } вроде правильно. И за 1s меняется . Значит , СSS--переменные живы. Потом, можно их убрать.
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
10.07.2024, 20:14
|
![Аватар для seregadushka](https://javascript.ru/forum/image.php?u=102511&dateline=1725278277) |
Аспирант
|
|
Регистрация: 10.07.2024
Сообщений: 39
|
|
в рабочем цикле берется много document.querySelectorAll
в нерабочей строке document.querySelector -- здесь же просто переменная. Или я што-то не понимаю .
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
10.07.2024, 21:18
|
![Аватар для seregadushka](https://javascript.ru/forum/image.php?u=102511&dateline=1725278277) |
Аспирант
|
|
Регистрация: 10.07.2024
Сообщений: 39
|
|
ПАУЗА:
прошу ее взять , если кто нашел ошибку.
Вот как считается функция , или переменная
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)',
…}
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
11.07.2024, 16:59
|
![Аватар для seregadushka](https://javascript.ru/forum/image.php?u=102511&dateline=1725278277) |
Аспирант
|
|
Регистрация: 10.07.2024
Сообщений: 39
|
|
смотрю код
<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.
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
11.07.2024, 17:10
|
![Аватар для seregadushka](https://javascript.ru/forum/image.php?u=102511&dateline=1725278277) |
Аспирант
|
|
Регистрация: 10.07.2024
Сообщений: 39
|
|
я понял , первый цвет rgba(255, 0, 0, 0.8) -- это преобразование из hsla((0 + 50), 100%, 50%, 0.8). Браузер рисует только rgba().
Тогда вопрос упрощается, где :hover ??? ?
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
11.07.2024, 17:59
|
![Аватар для seregadushka](https://javascript.ru/forum/image.php?u=102511&dateline=1725278277) |
Аспирант
|
|
Регистрация: 10.07.2024
Сообщений: 39
|
|
кто понимает этот DT
![](https://i.ibb.co/hs278wW/Hover.png)
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
12.07.2024, 06:25
|
![Аватар для seregadushka](https://javascript.ru/forum/image.php?u=102511&dateline=1725278277) |
Аспирант
|
|
Регистрация: 10.07.2024
Сообщений: 39
|
|
не знаю , в чем проблема. Я удалил 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.
Причина: скобки
|
|
![Старый](/forum/images/ca_serenity/statusicon/post_old.gif)
15.07.2024, 15:28
|
![Аватар для seregadushka](https://javascript.ru/forum/image.php?u=102511&dateline=1725278277) |
Аспирант
|
|
Регистрация: 10.07.2024
Сообщений: 39
|
|
Проблема решена. Ошибка была в том, что я был настолько уверен , на 1000% процентов , что внутри HSLA() можно проводить любые математические вычисления . А потом в виде СТРОКИ !!! отдавать для color: . А бедный JS должен всё это вычислять внутри строки ))) Я долго смотрел на эти плюсы, наверное , неделю. И только сегодня до меня дошло, что это строка , как бы она красиво не выглядела в консоли. Либо считать все снаружи в JS, либо в calc() . Проблема была там.
|
|
|
|