Заполните фон детей соответственно родительскому mousover

Question

У меня есть три бара, которые должны быть заполнены в процентах

<div class="bars" style="width:0%; background-color: red;">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</div>

Ширина изменяется в зависимости от наведения мыши на элемент .bars, как этот

 document.addEventListener('mousemove', function (ev) {
    var volume = document.getElementsByClassName('.bars')[0],
       position = ev.clientX - volume.offsetLeft,
       percentage = 100 * position / volume.clientWidth;

    volume.style.width = percentage + '%';
});

css

.bars {
height: 100%;
width: 100%;
position: relative;
.bar {
    background-color: white;
    position: absolute;
    bottom: 0;
    &.-one {
        height: 15px;
        width: 9px;
        left: 0;
    }
    &.-two {
        height: 20px;
        width: 9px;
        left: 10px;
    }
    &.-three {
        height: 25px;
        width: 9px;
        right: 0;
    }
}

Сводка. Я хочу заполнить каждый столбец цветом фона родителя на основе процентного соотношения при наведении мыши, не игнорируя расстояние между столбцами и высоту столбцов, поэтому родительский элемент должен иметь Само собой разумеется, прозрачный фон и полосы должны быть видны только как фон.

Заранее спасибо!

Answer 1

Я обычно делаю этот тип эффекта, используя градиентный фон. Допустим, вы хотите заполнить полосу синим цветом, а остальная полоса будет желтой. (Вы заменяете на нужный цвет)

var percentage = 30;  // 30%
var bar = ...         // get the bar element

bar.style.background = `linear-gradient(to top, blue 0%, blue ${percentage}%, yellow ${percentage}%, yellow 100%)`