

サイトURL  
<http://uu-hokkaido.cedars.jp/renewal.shtml>

メインビジュアルの北海道の地図の上の、地域のエリアをマウスオンすると、:hoverでピンクの丸が濃くなるのですが、  
例えば、札幌にマウスオンすると、ピンクの丸が濃くなると同時に、地図の横にある８つの長方形バナーの左上にある「札幌・小樽・道央」も一緒に:hoverされるようにするにはどのようにすればよいでしょうか？

どなたか、お分かりになる方、ご教授お願い致します。


CC BY-SA 4.0
2019-07-16T12:35:20.893
56687
2019-07-22T19:27:41.470
2019-07-16T12:41:39.097
34913
34913
question
javascript html css
:hoverを2つ連動したいです。


親要素をまたいで CSS を適用することは出来ないので、JavaScript を使うことになります。

今回は `ul`
要素同士で各項目の順序が一致しているため、ホバーされた項目のインデックス番号を調べ、それを用いて地図横の対応する長方形に装飾を行えば良いです。

[code]

    document.querySelectorAll(".pointer_list > li > .query_btn").forEach(btn => {
        btn.addEventListener("mouseenter", event => {
            const index = [...document.querySelector(".area_map > ul.pointer_list").children].findIndex(c => c == event.target.parentNode);
            event.target.style.backgroundColor = "rgba(233, 30, 99, 0.71)";
            document.querySelectorAll(".query_list li > a")[index].style.color = "#E91E63";
        });
        btn.addEventListener("mouseleave", event => {
            const index = [...document.querySelector(".area_map > ul.pointer_list").children].findIndex(c => c == event.target.parentNode);
            event.target.style.backgroundColor = "";
            document.querySelectorAll(".query_list li > a")[index].style.color = "";
        });
    });
    
    document.querySelectorAll(".query_list > li > .query_btn").forEach(btn => {
        btn.addEventListener("mouseenter", event => {
            const index = [...document.querySelectorAll(".area_list > ul.query_list")].map(e => [...e.children]).flat().findIndex(c => c == event.target.parentNode);
            event.target.style.color = "#E91E63";
            document.querySelectorAll(".pointer_list li > .query_btn")[index].style.backgroundColor = "rgba(233, 30, 99, 0.71)";
        });
        btn.addEventListener("mouseleave", event => {
            const index = [...document.querySelectorAll(".area_list > ul.query_list")].map(e => [...e.children]).flat().findIndex(c => c == event.target.parentNode);
            event.target.style.color = "";
            document.querySelectorAll(".pointer_list li > .query_btn")[index].style.backgroundColor = "";
        });
    });
    
[/code]

ただし、この方法では HTML
の構造が変化したときの対応に手間がかかるので、カスタムデータ属性で対応する要素同士を紐付けておくなどしておいたほうが良いと思います。


CC BY-SA 4.0
2019-07-16T16:06:33.710
56689
2019-07-22T19:27:41.470
2019-07-22T19:27:41.470
32986
32986
56687
answer