[Sanny333]

сайт 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;
}