CODEWITHSUNDEEP
htmlcss
Kevin Bahler
Kevin Bahler

Reputation: 1

css hover to change multiple unrelated elements with same class

I'm making a piano keyboard with multiple octaves. Right now, I can hover over any individual key make it change color. What I want to do is highlight every key of the same note. When I hover over any C key, for example, I want all of the C keys on the keyboard to change color. And I want this for all 12 notes in each octave.

I'll post code if you need, but it's a bit unwieldy to fit in a forum post.

Is this doable with CSS alone, or is JS going to be necessary? It seems like there should be an easy way to make every element with the same class react whenever any one of them is hovered over, but since I don't think they are siblings or parent/child, I can't figure out how to make any one thing activate everything.

Upvotes: 0

Views: 466

Answers (1)

Daniels118
Daniels118

Reputation: 1227

Without using javascript you can achieve this only if all the keys of the same note in different octaves belong to the same container, and different notes in the same octave belong to different containers.

You use :hover selector on the parent and you style its children. To make the keys of different containers interleaved, the containers must overlap at precise positions. The trick to intercept hovers is to make the containers height=0, this way the front containers don't cover the ones behind, but the hover is stil catched by the children.

Here is an example with 7 notes and 3 octaves:

.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>

Upvotes: 1

Related Questions