css - 悬停在 sibling 上只会影响 sibling 向上

Question

代码笔:https://codepen.io/andrelange91/pen/VyjYBg

我做了以下声级示例，它应该在悬停时填充其他条。但目前是落后的...而且我一直没能找到一种方法(尽管我敢打赌这很简单)来扭转这种影响。

如果我将鼠标悬停在数字 3 上，它应该会影响它，以及数字 2 和 1。不是 5、4 和 3。

我有以下 html:

<div class="volume" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="20" aria-valuetext="20 percent" data-volume-level-wrapper="">
                                <button class="volumeLevel" data-volume-level="20" aria-label="lyd 20%"></button>
                                <button class="volumeLevel" data-volume-level="40" aria-label="lyd 40%"></button>
                                <button class="volumeLevel" data-volume-level="60" aria-label="lyd 60%"></button>
                                <button class="volumeLevel" data-volume-level="80" aria-label="lyd 80%"></button>
                                <button class="volumeLevel" data-volume-level="100" aria-label="lyd 100%"></button>
                            </div>

和CSS:

body{
  background:black;
}
.volume {
    overflow: hidden;
    position: relative;
    height: 65px;
    margin-left: 650px;
    background:white;
    width:200px;
}
.volumeLevel {
    width: 4px;
    float: left;
    margin-top: 10px;
    border-radius: 7px;
    border: none;
    margin-right: 10px;
    position: absolute;
    bottom: 10px;
}

.volume[aria-valuenow="20"] .volumeLevel:first-child {

    background-color: #00A08C;
}
.volume .volumeLevel[data-volume-level="20"] {
    height: 25px;
    left: 0;
}
.volume .volumeLevel[data-volume-level="40"] {
    height: 30px;
    left: 20px;
}
.volume .volumeLevel[data-volume-level="60"] {
    height: 35px;
    left: 40px;
}
.volume .volumeLevel[data-volume-level="80"] {
    height: 40px;
    left: 60px;
}
.volume .volumeLevel[data-volume-level="100"] {
    height: 45px;
    left: 80px;
}
.volume .volumeLevel:hover {
    background-color: #00A08C;
}

.volume{
  .volumeLevel:hover ~ .volumeLevel{
        background-color: #00A08C;
  }
} 

Answer 1

第一个栏应该有静态颜色吗？如果不是，一个简单的反转感觉就足够了:

<div class="volume" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-valuetext="20 percent" data-volume-level-wrapper="">
<button class="volumeLevel" data-volume-level="100" aria-label="lyd 20%"></button>
<button class="volumeLevel" data-volume-level="80" aria-label="lyd 40%"></button>
<button class="volumeLevel" data-volume-level="60" aria-label="lyd 60%"></button>
<button class="volumeLevel" data-volume-level="40" aria-label="lyd 80%"></button>
<button class="volumeLevel" data-volume-level="20" aria-label="lyd 100%"></button>
</div>

如果第一个栏在开始时应该有一个静态颜色，像这样对 css 稍作更改可能没问题:

.volume[aria-valuenow="100"] .volumeLevel:last-child { 
background-color: #00A08C;
}

在 codepen 中检查并查看结果...

附加编辑:

如果不想触及之前提到的html部分，需要在css中进行反转...

    .volume .volumeLevel[data-volume-level="100"] {
    height: 25px;
    left: 0;
}
.volume .volumeLevel[data-volume-level="80"] {
    height: 30px;
    left: 20px;
}
.volume .volumeLevel[data-volume-level="60"] {
    height: 35px;
    left: 40px;
}
.volume .volumeLevel[data-volume-level="40"] {
    height: 40px;
    left: 60px;
}
.volume .volumeLevel[data-volume-level="20"] {
    height: 45px;
    left: 80px;
}

示例:https://codepen.io/anon/pen/EoyjbM