0

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

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

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

1 件の回答 1

2

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

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

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 = "";
    });
});

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

4
  • supaさん、今回もご教授いただき、どうもありがとうございます。 ちょっと、確認する時間が取れず、後ほど確認させていただいてから評価をさせて頂きたいと思います。いつも、迅速なアドバイス感謝しております。
    – Veronica
    Commented 2019年7月17日 14:14
  • supaさん、ご返信遅くなり申し訳ありません。 コード張ってみたのですが、連動できませんでした。 >ホバーされた項目のインデックス番号を調べ、それを用いて地図横の対応する長方形に装飾を行えば良い ⇒すみません。ちょっと難しくて理解できなかったので、もうすこし具体的に教えていただけますでしょうか?何卒よろしくお願い致します。
    – Veronica
    Commented 2019年7月22日 14:09
  • 動作しないとのことなので、回答を編集しました。該当する部分をもう少し具体的に書くと、まず .area_map 内の赤い丸がホバーされたとき、その赤い丸が親要素から見て何番目の要素か、番号を取得します。すると .area_map.area_list は要素の順番が対応しているため、 .area_list 内の先ほど取得した番号と一致する箇所の要素にスタイルを適用すれば良いことになります。
    – supa
    Commented 2019年7月22日 18:58
  • supaさん、ご返信遅くなり申し訳ありません。新しいコード張ってみたのですが、連動できませんでした。>番号を取得します。⇒札幌は1番ということでしょうか?>取得した番号と一致する箇所の要素にスタイルを適用すれば良い⇒ここがちょっとわからないです。何度もご丁寧に説明頂いているのに、理解力不足でご迷惑おかけしてすみません。よろしければ、もうすこし具体的に教えていただけますでしょうか?何卒よろしくお願い致します。
    – Veronica
    Commented 2019年7月30日 11:51

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。