сайт
https://xn----7sbbb7bbx7alc6h.xn--p1ai/
раздел Проекты.
Вместе с наведением на картинку загружается горизонтальный прогесс голубым (before) элемент. Как сделеать чтоб он синхронно так же с текстом спан менял цвет?
например: случайно загружется фиолетовый в спан и горизонтальный ползунок загрузки тоже становится фиолетовым при наведении на картинку. логика - при навденении на картинку цвет меняется синхронно и у ползунка загрузки и у span вместе.
Я пробую но че то не алё
let img = document.querySelectorAll('.portfolio__bl img');
let span = getComputedStyle(document.querySelectorAll('.portfolio__bl__img'), ':before');
let colors = ['#8d67c3', '#f376a2', '#4263a8', '#19b4ee'];
for(let i = 0; i < img.length; i++) {
span[i].dataset.current = 0;
img[i].addEventListener('mouseover', function () {
span[i].style.backgroundColor = colors[span[i].dataset.current];
span[i].dataset.current++;
if (span[i].dataset.current >= colors.length) {
span[i].dataset.current = 0;
}
});
img[i].addEventListener('mouseout', function () {
span[i].style.backgroundColor = '';
});
}
css
.portfolio__bl__img {
margin-bottom: 20px;
overflow: hidden;
position: relative;
width: 400px;
}
.portfolio__bl__img::before {
content: '';
position: absolute;
background-color: #19b4ee;
-webkit-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
height: 7px;
width: 0;
bottom: 0;
right: 0;
left: 0;
}
.portfolio__bl__img:hover::before {
width: 400px;
}
