徘徊在兄弟姐妹身上只会影响兄弟姐妹
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了徘徊在兄弟姐妹身上只会影响兄弟姐妹相关的知识，希望对你有一定的参考价值。
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;
}
}
答案
第一个酒吧应该有静态颜色吗？如果没有，一个简单的逆转就像这样：
<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>另一答案
将'之后'更改为'之前'
.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
以上是关于徘徊在兄弟姐妹身上只会影响兄弟姐妹的主要内容，如果未能解决你的问题，请参考以下文章
哪位兄弟姐妹怎么在SAP/ABAP的表BKPF中增加自定义字段怎么做