Перестаёт работать псевдокласс :hover после изменения цвета
Есть у меня такой кусок кода:
#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); Это стили к блоку с ссылками на другие страницы на сайте. Вот они:
<div class="space"><h1 align="center" ><font size="5" color="white">Содержание</font></h1></div>
<div id="links" >
<a href="/">Характеристика Головлёва</a>
<a href="/obraz">Образ Головлёва</a>
<a href="/prototypes">Прототип Иудушки</a>
<a href="/kino">Иудушка Головлёв в кино и театре</a>
<a href="/raskoln">Раскольников</a>
<a href="/game">Игра</a>
</div>
Однако у меня есть 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 перестает работать польностью. Как починить?
У стилей есть приоритет. Когда несколько стилей задают какое-нибудь свойство у одного и того же элемента (в данном случае цвет), то браузер решает какой из цветов выбрать, ориентируясь на приоритет этих стилей.
#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 { ... } 
Скрипт перезаписывает стиль, поэтому он не работает. Можно создать доп. класс и менять его в зависимости от логики как-то так
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);
Не использовать JS и реализовать смену цвета через CSS. JS меняет "inline CSS", который имеет самый высокий приоритет.