Загрузка прогресс бара вместе со сменой цвета span

Question

сайт >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;
}[![прогресс бар][1]][1]


  [1]: https://i.stack.imgur.com/139r8.jpg

Answer 1

Как вариант создать в css переменную например span{--bg-span-color: white} задать ей например белый цвет, присвоить в стилях где нужно .my_class{background-color: var(--bg-span-color)} и через js менять цвет document.querySelector("span").style.setProperty('--bg-span-color', "black")

Answer 2

let img = document.querySelectorAll('.portfolio__bl img');
let span = document.querySelectorAll('.portfolio__bl__title span');
let root = document.querySelector(".root");

let colors = ['#8d67c3', '#f376a2', '#4263a8', '#19b4ee'];

for(let i = 0; i < img.length; i++) 
{
  span[i].dataset.current = 0;

  img[i].addEventListener('mouseover', function () {
                                
      root.style.setProperty('--span-bgcolor', colors[span[i].dataset.current])
      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 = '';
  });
}

.portfolio__cont__in {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.portfolio__bl__img {
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
    width: 400px;
}

a {
    outline: none;
    color: #333;
    text-decoration: none;
    font-size: 24px;
    line-height: 1.1667;
    font-weight: 200;
    letter-spacing: normal;
}

.portfolio__bl__img:hover::before {
    width: 400px;
    }
.portfolio__bl__img img {
    width: 100%;
    height: auto;
    cursor: url(/images/fancybox_cursor.png),auto;
    -webkit-transition: 1s all ease;
    -o-transition: 1s all ease;
    transition: 1s all ease;
}

.portfolio__bl__img::before {
    content: '';
    position: absolute;
    background-color: var(--span-bgcolor);
    -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__title span 
{

    font-size: 20px;
    line-height: 1.08365;
    font-weight: 600;
    letter-spacing: .011em;
    color: #1c1e2b;
    font-weight: 700;
    position: relative;
    font-family: 'SF', 'Helvetica Neue','Helvetica',Arial,sans-serif;
    -webkit-transition: .25s ease;
    -o-transition: .25s ease;
    transition: .25s ease;
    background-repeat: repeat-x;
    background-position: 0 65%;
    background-size: 0 0;
}

<div class="root portfolio__bl wow slideInUp" style="--span-bgcolor: black; visibility: visible; animation-name: slideInUp;">
    
             <a href="/portfolio/akses/" class="portfolio__cont__in">
                        <div class="portfolio__bl__img">
          <img class="lazy" data-src="https://xn----7sbbb7bbx7alc6h.xn--p1ai/images/portfolio/medissa.png" alt="Комплексное продвижение сайта сети клиник «Medissa Art»" src="https://xn----7sbbb7bbx7alc6h.xn--p1ai/images/portfolio/medissa.png">
                                    
                                </div>
                                <div class="portfolio__bl__title">
                                    <span data-current="0">Дизайн лендинга для сети клиник «Medissa Art»
                </span>
                                </div>
                            </a>
                        </div>

Answer 3

спасибо разобрался. И еще уточнение

let img = document.querySelectorAll('.portfolio__bl img');
let span = document.querySelectorAll('.portfolio__bl__title span');
let root = document.querySelectorAll(".root");

let colors = ['#8d67c3', '#f376a2', '#4263a8', '#19b4ee'];

for(let i = 0; i < img.length; i++) 
{
  span[i].dataset.current = 0;

  img[i].addEventListener('mouseover', function () {
                                
      root[i].style.setProperty('--span-bgcolor', colors[span[i].dataset.current])
      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 = '';
  });
}

for(let i = 0; i < span.length; i++) {
span[i].dataset.current = 0;
span[i].onmouseout = function() {
    this.style.backgroundColor = '';
}
span[i].addEventListener('mouseover', function(event) {
    this.style.backgroundColor = colors[this.dataset.current];
    this.dataset.current++;
    if (this.dataset.current >= colors.length) {
        this.dataset.current = 0;
    }
});

}

как сделать чтобы при наведении на span был тот же эффект - сверху загружалась полоса. (сейчас только при наведении на img подгорает span)

БЛОГ НА HUSL

Загрузка прогресс бара вместе со сменой цвета span

Ответы (3 шт):