Перестаёт работать псевдокласс :hover после изменения цвета

Question

Перестаёт работать псевдокласс :hover после изменения цвета

Screamer Ученик (121), на голосовании 1 год назад

Есть у меня такой кусок кода:

 #links a{ 
        padding: 6px 8px 6px 16px; 
        text-decoration: none; 
        font-size: 15px; 
        color: #ffffff; 
        display: block; 
        background-color: rgb(255, 149, 0); 
        transition: 0.5s linear; 
     
    } 
    #links a:hover { 
    color: #000000; 
    background-color: rgb(76, 255, 21);

Это стили к блоку с ссылками на другие страницы на сайте. Вот они:

 Содержание
 
         
        Характеристика Головлёва 
        Образ Головлёва 
        Прототип Иудушки 
        Иудушка Головлёв в кино и театре 
        Раскольников 
        Игра

Однако у меня есть JS код который медленно меняет цвет заднего фона этих ссылок:

 let links = document.querySelectorAll('#links a'); 
setTimeout( () => {links.forEach(el =>{slowColorChange(el,'255,89,0','21,87,1',1000)})}, 500 );

Как видно, измение цвета происходит через 500 миллисекунд посл прогрузки страницы, и в эти 500 миллисекунд :hover работает нормально, однако когда цвет начинет меняться, :hover перестает работать польностью. Как починить?

Answer 1

Как бы так =)

https://chat.openai.com/share/386b5bd1-c5c0-4311-a95f-f847b2a21718

Answer 2

Павел Просветленный (25618) 1 год назад

Не использовать JS и реализовать смену цвета через CSS. JS меняет "inline CSS", который имеет самый высокий приоритет.

ScreamerУченик (121) 1 год назад

Как менять цвет через Css?

Павел Просветленный (25618) Screamer, используя свойство transition. https://developer.mozilla.org/ru/docs/Web/CSS/transition Можно задать задержку для смены цвета.

Answer 3

Скрипт перезаписывает стиль, поэтому он не работает. Можно создать доп. класс и менять его в зависимости от логики как-то так

 let links = document.querySelectorAll('#links a'); 
 
setTimeout(() => { 
    links.forEach(el => { 
        el.addEventListener('mouseover', () => { 
            el.classList.add('hovered'); 
        }); 
 
        el.addEventListener('mouseout', () => { 
            el.classList.remove('hovered'); 
        }); 
 
        slowColorChange(el, '255, 89, 0', '21, 87, 1', 1000); 
    }); 
}, 500);

Answer 4

У стилей есть приоритет. Когда несколько стилей задают какое-нибудь свойство у одного и того же элемента (в данном случае цвет), то браузер решает какой из цветов выбрать, ориентируясь на приоритет этих стилей.

#links a { ... } - самый низкий
#links a:hover { ... } - выше предыдущего, потому что более точный (чем больше в селекторе id, классов, псевдоклассов и т.д., тем приортитет выше)
<a style="...">...</a> - самый высокий приоритет у стиля в HTML элементе, выше него может быть только, если поставить префикс !important (не рекомендуется так делать)

Ошибка: у тебя приоритет у стиля после таймаута самый высокий, он перекрывает даже цвет по наведению мыши.

Решение:
1) добавить ещё один стиль, туда переписать цвета из JS

 #links.after-timeout a { ... }

2) в JS вместо изменения стиля элемента, добавить класс родительскому контейнеру (чтобы не перебирать все элементы)

 const links = document.querySelector('#links');
setTimeout(() => links.classList.add('after-timeout'), 500);

3) Теперь приоритет стиля, добавленного на шаге 1 и стиля при наведении мышкой одинаковый. Приоритетом в данном случае будет пользоваться стиль, идущий последним в css файле. Но это не очевидно, и лучше добавить ещё селекторов, чтобы повысить приоритет.

 #links a:hover, #links.after-timeout a:hover { ... }