Site URL
http://uu-hokkaido.cedars.jp/renewal.shtml
If you mouse-on the area of the area on the main visual map of Hokkaido, the pink circle becomes darker in :hover, but
For example, when you mouse on Sapporo, the pink circle thickens and at the same time, "Sapporo, Otaru, and Michio" in the upper left corner of the eight rectangular banners next to the map are also: How do you make them hover?
If anyone knows, please let me know.
javascript html css
Since CSS cannot be applied across parent elements, JavaScript will be used.
This time, the ul elements match the order of each item, so you can look at the index number of the hover item and use it to decorate the corresponding rectangle next to the map.
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=";
});
});
However, this method takes a lot of time to deal with changes in HTML structure, so I think it's better to link the corresponding elements with custom data attributes.
© 2024 OneMinuteCode. All rights reserved.