サイトURL
http://uu-hokkaido.cedars.jp/renewal.shtml
メインビジュアルの北海道の地図の上の、地域のエリアをマウスオンすると、:hoverでピンクの丸が濃くなるのですが、
例えば、札幌にマウスオンすると、ピンクの丸が濃くなると同時に、地図の横にある8つの長方形バナーの左上にある「札幌・小樽・道央」も一緒に:hoverされるようにするにはどのようにすればよいでしょうか?
どなたか、お分かりになる方、ご教授お願い致します。
サイトURL
http://uu-hokkaido.cedars.jp/renewal.shtml
メインビジュアルの北海道の地図の上の、地域のエリアをマウスオンすると、:hoverでピンクの丸が濃くなるのですが、
例えば、札幌にマウスオンすると、ピンクの丸が濃くなると同時に、地図の横にある8つの長方形バナーの左上にある「札幌・小樽・道央」も一緒に:hoverされるようにするにはどのようにすればよいでしょうか?
どなたか、お分かりになる方、ご教授お願い致します。
親要素をまたいで 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 の構造が変化したときの対応に手間がかかるので、カスタムデータ属性で対応する要素同士を紐付けておくなどしておいたほうが良いと思います。
.area_map
内の赤い丸がホバーされたとき、その赤い丸が親要素から見て何番目の要素か、番号を取得します。すると .area_map
と .area_list
は要素の順番が対応しているため、 .area_list
内の先ほど取得した番号と一致する箇所の要素にスタイルを適用すれば良いことになります。