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

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Загрузка прогресс бара со сменой цвета (https://javascript.ru/forum/misc/82825-zagruzka-progress-bara-so-smenojj-cveta.html)

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

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

Sanny333,
сделали бы минимальный макет целиком, а не куски кода.
например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Sanny333,

<!DOCTYPE html>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <base href="https://xn----7sbbb7bbx7alc6h.xn--p1ai/" />
    <style type="text/css">
        body {
            display: flex;
            flex-wrap: wrap;
            justify-content:  space-around;
        }

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

        .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:hover .portfolio__bl__img::before {
            width: 200px;
            background-color: var(--color, #19b4ee);

        }


        .portfolio__bl:hover .portfolio__bl__title>span {
            background-color: var(--color, #19b4ee);

        }

        .portfolio__bl:hover a.portfolio__cont__in {
            text-decoration: none;
            color: rgba(255, 255, 255, 1);
        }

        .portfolio__bl a.portfolio__cont__in {
            line-height: 1;
            text-align: center;
        }

        .portfolio__bl {
            width: 200px;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const colors = ['#8d67c3', '#f376a2', '#4263a8', '#19b4ee'],
                len = colors.length;
            document.querySelectorAll(".portfolio__bl").forEach((div, i) =>{
            i = 0;
            div.addEventListener("mouseenter", _ => div.style.setProperty("--color", colors[i++ % len]))
            });
        });
    </script>
</head>

<body>
    <div class="portfolio__bl wow slideInUp" style="visibility: visible; animation-name: slideInUp;">
        <a href="#" class="portfolio__cont__in">
            <div class="portfolio__bl__img">
                <img class="lazy" data-src="/images/portfolio/sarmat2.jpg" alt="Продвмжение ЖК «Сармат»" src="/images/portfolio/sarmat2.jpg">
            </div>
            <div class="portfolio__bl__title">
                <span data-current="0" style="">Комплексное продвижение застройщика с первого этапа проектирования</span>
            </div>
        </a>
    </div>
    <div class="portfolio__bl wow slideInUp" style="visibility: visible; animation-name: slideInUp;">
        <a href="#" class="portfolio__cont__in">
            <div class="portfolio__bl__img">
                <img class="lazy" data-src="/images/portfolio/sarmat2.jpg" alt="Продвмжение ЖК «Сармат»" src="/images/portfolio/sarmat2.jpg">
            </div>
            <div class="portfolio__bl__title">
                <span data-current="0" style="">Комплексное продвижение застройщика с первого этапа проектирования</span>
            </div>
        </a>
    </div>
    <div class="portfolio__bl wow slideInUp" style="visibility: visible; animation-name: slideInUp;">
        <a href="#" class="portfolio__cont__in">
            <div class="portfolio__bl__img">
                <img class="lazy" data-src="/images/portfolio/sarmat2.jpg" alt="Продвмжение ЖК «Сармат»" src="/images/portfolio/sarmat2.jpg">
            </div>
            <div class="portfolio__bl__title">
                <span data-current="0" style="">Комплексное продвижение застройщика с первого этапа проектирования</span>
            </div>
        </a>
    </div>
    <div class="portfolio__bl wow slideInUp" style="visibility: visible; animation-name: slideInUp;">
        <a href="#" class="portfolio__cont__in">
            <div class="portfolio__bl__img">
                <img class="lazy" data-src="/images/portfolio/sarmat2.jpg" alt="Продвмжение ЖК «Сармат»" src="/images/portfolio/sarmat2.jpg">
            </div>
            <div class="portfolio__bl__title">
                <span data-current="0" style="">Комплексное продвижение застройщика с первого этапа проектирования</span>
            </div>
        </a>
    </div>
    <div class="portfolio__bl wow slideInUp" style="visibility: visible; animation-name: slideInUp;">
        <a href="#" class="portfolio__cont__in">
            <div class="portfolio__bl__img">
                <img class="lazy" data-src="/images/portfolio/sarmat2.jpg" alt="Продвмжение ЖК «Сармат»" src="/images/portfolio/sarmat2.jpg">
            </div>
            <div class="portfolio__bl__title">
                <span data-current="0" style="">Комплексное продвижение застройщика с первого этапа проектирования</span>
            </div>
        </a>
    </div>
    <div class="portfolio__bl wow slideInUp" style="visibility: visible; animation-name: slideInUp;">
        <a href="#" class="portfolio__cont__in">
            <div class="portfolio__bl__img">
                <img class="lazy" data-src="/images/portfolio/sarmat2.jpg" alt="Продвмжение ЖК «Сармат»" src="/images/portfolio/sarmat2.jpg">
            </div>
            <div class="portfolio__bl__title">
                <span data-current="0" style="">Комплексное продвижение застройщика с первого этапа проектирования</span>
            </div>
        </a>
    </div>
</body>

</html>

Поставил. Цвета должны каждый раз меняться при наведении на каждый portfolio__bl

А они просто разноцветные стали, логика - навожу на каждое отдельно фото и при каждом наведении меняется цвет (цвета заданные в цикле).

Цитата:

Сообщение от Sanny333

при каждом наведении меняется цвет

добавлено.

Спасибо. И подскажите как у всех span сохранять color: #fff при наведении (цвет текста)

разобрался.