html - css悬停以更改具有同一类的多个不相关元素

Question

我正在制作一个具有多个八度音阶的钢琴键盘。现在，我可以将鼠标悬停在任何单个键上，让它改变颜色。我想要做的是突出显示同一音符的每个键。例如，当我将鼠标悬停在任何 C 键上时，我希望键盘上的所有 C 键都改变颜色。我想要每个八度音阶中的所有 12 个音符。

如果您需要，我会发布代码，但是适合论坛帖子有点笨拙。

单独使用 CSS 是否可行，还是需要 JS？似乎应该有一种简单的方法可以使具有相同类的每个元素在任何一个悬停时都会做出反应，但是由于我认为它们不是兄弟姐妹或父/子，我不知道如何让任何一件事激活一切。

标签： htmlcss

Answer 1

如果不使用javascript，则只有在不同八度音程中的同一音符的所有键都属于同一个容器，并且同一八度音程中的不同音符属于不同容器时，才能实现此目的。

您在父级上使用 :hover 选择器并为其子级设置样式。为了使不同容器的键交错，容器必须在精确的位置重叠。拦截悬停的技巧是使容器高度=0，这样前面的容器不会覆盖后面的容器，但悬停仍然被孩子们抓住。

这是一个有 7 个音符和 3 个八度音阶的例子：

.Piano {
    position: relative;
    height: 5cm;
  width: 22cm;
}

.Note {
    position: absolute;
    height: 0;
}

.Note:nth-child(1) {left: 0cm;}
.Note:nth-child(2) {left: 1cm;}
.Note:nth-child(3) {left: 2cm;}
.Note:nth-child(4) {left: 3cm;}
.Note:nth-child(5) {left: 4cm;}
.Note:nth-child(6) {left: 5cm;}
.Note:nth-child(7) {left: 6cm;}

.Octave {
    display: inline-block;
    border: 1px solid black;
    width: 1cm;
    height: 5cm;
}

.Octave:not(:first-child) {
    margin-left: 6cm;
}

.Note:hover .Octave {
    background-color: red;
}

<div class="Piano">
    <div class="Note">
        <div class="Octave">C1</div>
        <div class="Octave">C2</div>
        <div class="Octave">C3</div>
    </div>
    <div class="Note">
        <div class="Octave">D1</div>
        <div class="Octave">D2</div>
        <div class="Octave">D3</div>
    </div>
    <div class="Note">
        <div class="Octave">E1</div>
        <div class="Octave">E2</div>
        <div class="Octave">E3</div>
    </div>
    <div class="Note">
        <div class="Octave">F1</div>
        <div class="Octave">F2</div>
        <div class="Octave">F3</div>
    </div>
    <div class="Note">
        <div class="Octave">G1</div>
        <div class="Octave">G2</div>
        <div class="Octave">G3</div>
    </div>
    <div class="Note">
        <div class="Octave">A1</div>
        <div class="Octave">A2</div>
        <div class="Octave">A3</div>
    </div>
    <div class="Note">
        <div class="Octave">B1</div>
        <div class="Octave">B2</div>
        <div class="Octave">B3</div>
    </div>
</div>