Question

我有三个栏需要根据百分比填充

#include <memory>
#include <iostream>

class test
{
    private:
        std::shared_ptr<int> age;

    public:

        // cheap and quick const ref
        test(const std::shared_ptr<int>& data)
        {
            age = data;
        }

        void print()
        {
            std::cout << *age << std::endl;
            std::cout << "Use count: " <<  age.use_count() << std::endl;
        }

};

int main()
{
    // here we store the data
    int i = 17;
    // here we have the shared_ptr
    std::shared_ptr<int> p = std::make_shared<int>(i);
    // here we pass it to the object
    test t(p);
    t.print();

    return 0;
}

宽度随.bars元素的鼠标悬停而变化

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

css

 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 + '%';
});

摘要：我想根据鼠标悬停百分比用父级的背景色填充每个条形，而不忽略这些条形之间的间距和条形的高度，因此父级应该具有透明的背景，并且这些条形只能是可见的背景。

谢谢！

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%)`

根据父母的要求填写孩子的背景

1 个答案: