Question

Codepen：https://codepen.io/andrelange91/pen/VyjYBg

我做了以下的声音级别示例，它应该在悬停时填充其他条形图。但它目前正在倒退...... 我无法找到一种方法（虽然我敢打赌它很简单），以扭转这种影响。

如果我将鼠标悬停在第三位，它应该对此产生影响，并且数字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

Answer 2

更改＆＃39;＆＃39;到＆＃39;

之前

.volume{
  .volumeLevel:hover ~ .volumeLevel{
    background-color: #00A08C;
    &:before{
  -webkit-transition: background-color 1s ease-out;
    -moz-transition: background-color 1s ease-out;
    -o-transition: background-color 1s ease-out;
    transition: background-color 1s ease-out;
    }
  }
}

检查Codepen

悬停在兄弟姐妹身上只影响兄弟姐妹

2 个答案: