子要素をホバーした時、親要素の兄弟要素の子要素に色を付けたい

前提・実現したいこと

下記ソースコードのchild-1をhoverした時にchild-siblingを赤色にしたいと考えています。
pointer-eventsを使えばできるかと思ったのですが、child-2, child-3をhoverした時にも色が変わってしまいます。

child-2, child-3をhoverした時にchild-siblingの色を変えない方法があれば教えていただきたいです。

よろしくお願いいたします。

** ※出来るだけ下記htmlの構造は変えたくありません。 **

該当のソースコード

html
1<div class="events-none">
2  <div class="parent">
3    <div class="child-1">hoverでchild-siblingを赤色にする</div>
4    <div class="child-2">hoverでchild-2の色だけが変わる</div>
5    <div class="child-3">hoverでchild-3の色だけが変わる</div>
6  </div>
7  <div class="parent-sibling">
8    <div class="child-sibling">赤色</div>
9  </div>
10</div>

css
1.events-none {
2  pointer-events: none;
3}
4
5.events-none:hover .child-sibling {
6  color: red;
7}
8
9.parent div {
10  pointer-events: auto;
11}
12
13.child-2:hover {
14  color: green;
15}
16.child-3:hover {
17  color: blue;
18}
19

行動規範の内容に同意します

回答1件

ベストアンサー

CSSだけだと、2020年現在だとは実装不可能です。
JavaScriptと組み合わせる必要があります。

CSS
1/*
2.events-none:hover .child-sibling {
3  color: red;
4}
5*/
6.child-sibling.active {
7  color: red;
8}

JS
1btn = document.getElementsByClassName('child-1')[0];
2target = document.getElementsByClassName('child-sibling')[0];
3
4// ホバー
5btn.addEventListener('mouseenter', () => {
6  target.classList.add('active');
7}, false);
8
9// ホバー解除
10btn.addEventListener('mouseleave', () => {
11  target.classList.remove('active');
12}, false);