当另一个元素是 hover 时，更改 svg 路径

Question

I'm posting my first question because I have an average level with web languages and I don't know all the subtleties. I don't know if I should touch the CSS which was my first idea or if I should do Javascript but I don't know enough about it... I want to change the zones of a map in an svg file when I hover over another element on the page. I'm already trying to change the fill of the.maptest class when I hover over the "chateauneufbeta" class. What I'm trying to do is below: / What I want to do: when the class chateauneufbeta is hovered over it changes the path of the.maptest class /

My map area has two classes: .ZoneVerte and.maptest for more freedom of selection.

I translated a part of my CSS to help you (I am of French origin ^^)

I use Wordpress for information. Here is a part of my current CSS and HTML:

 /*Affichage flex de la carte */.location__map-region{ display: flex; margin: 2rem auto; } /*Séparation de chaque région avec une ligne blanche de 1 pixel */.location__map-region path { stroke: #ffffff; stroke-width: 1; transition: .6s fill; } /*What I want to do: when the class chateauneufbeta is hovered over it changes the path of the.maptest class*/.chateauneufbeta:hover ~.maptest { fill: #93c020;important: opacity. 1;0.important: } /*Normal colour of the Châteauneuf territory*/;ZoneVerte{ fill: #93c020. opacity; 0.8: } /*Colour of the Châteauneuf area when it is flown over */:ZoneVerte;hover{ fill: #93c020. opacity; 1.0; }

Part of my HTML code with the list of cities on the side (see the image at the bottom of the post):

 <div class="location__wrapper"><div class="location__content"><ul class="location__list"> <li class="location__list-item"><a data-area-id="1" class="location__list-link" href="https://www.antibes-juanlespins.com/">Antibes Juan-les-Pins</a></li> <li class="location__list-item"><a data-area-id="22" class="location__list-link" href="http://bezaudun.fr/">Bézaudun-les-Alpes</a></li> <li class="location__list-item"><a data-area-id="3" class="location__list-link" href="https://www.biot.fr/">Biot</a></li> <li class="location__list-item"><a data-area-id="21" class="location__list-link" href="https://bouyon.fr/">Bouyon</a></li> <li class="location__list-item"><a data-area-id="15" class="location__list-link" href="http://www.caussols.fr/fr/">Caussols</a></li> <li class="location__list-item chateauneufalpha"><a data-area-id="9" class="location__list-link chateauneufbeta" href="https://www.ville-chateauneuf.fr/">Châteauneuf</a></li> <li class="location__list-item"><a data-area-id="18" class="location__list-link" href="http://www.cipieres.fr/">Cipières</a></li> <li class="location__list-item"><a data-area-id="19" class="location__list-link" href="#">Conségudes</a></li> <li class="location__list-item"><a data-area-id="14" class="location__list-link" href="http://www.courmes.fr/">Courmes</a></li> <li class="location__list-item"><a data-area-id="17" class="location__list-link" href="#">Coursegoules</a></li> <li class="location__list-item"><a data-area-id="13" class="location__list-link" href="https://www.gourdon06.fr/fr">Gourdon</a></li> <li class="location__list-item"><a data-area-id="16" class="location__list-link" href="http://www.greolieres.fr/">Gréolières</a></li> <li class="location__list-item"><a data-area-id="6" class="location__list-link" href="https://www.lacollesurloup.fr/fr">La Colle-sur-Loup</a></li> <li class="location__list-item"><a data-area-id="20" class="location__list-link" href="https://laroqueenprovence.fr/">La Roque-en-Provence</a></li> <li class="location__list-item"><a data-area-id="12" class="location__list-link" href="https://lebarsurloup.fr/">Le Bar-sur-Loup</a></li> <li class="location__list-item"><a data-area-id="10" class="location__list-link" href="https://lerouret.fr/">Le Rouret</a></li> <li class="location__list-item"><a data-area-id="24" class="location__list-link" href="#">Les Ferres</a></li> <li class="location__list-item"><a data-area-id="8" class="location__list-link" href="https://mairie-opio.fr/">Opio</a></li> <li class="location__list-item"><a data-area-id="7" class="location__list-link" href=" https://www.ville-roquefort-les-pins.fr/">Roquefort-les-Pins</a></li> <li class="location__list-item"><a data-area-id="5" class="location__list-link" href="https://www.saint-pauldevence.com/">Saint-Paul de Vence</a></li> <li class="location__list-item"><a data-area-id="11" class="location__list-link" href="https://tourrettessurloup.com/">Tourrettes-sur-Loup</a></li> <li class="location__list-item"><a data-area-id="2" class="location__list-link" href="https://www.ville-valbonne.fr/">Valbonne Sophia Antipolis</a></li> <li class="location__list-item"><a data-area-id="23" class="location__list-link" href="http://www.vallauris-golfe-juan.fr/">Vallauris Golfe-Juan</a></li> <li class="location__list-item"><a data-area-id="4" class="location__list-link" href="https://www.villeneuveloubet.fr/">Villeneuve-Loubet</a></li></ul></div>

The result I expect at the end is the following:

map change color

Answer 1

Here's some simple code that shows how to do what you want. I've added comments to the code to describe what each step is doing.

 // Find all the <a> elements in the list var items = document.querySelectorAll("UL.location__list LI A"); // To each of them, add an event handler for when the mouse enters its box, and also when it leaves items.forEach(item => { item.addEventListener("mouseover", itemMouseOver); item.addEventListener("mouseout", itemMouseOut); }); function itemMouseOver(evt) { // Get the value of the data-area-id attribute for the <a> we are entering var areaId = evt.target.dataset['areaId']; // Use it to find the right circle, and add the class "active" to its class attaribute document.getElementById(areaId).classList.add("active"); } function itemMouseOut(evt) { // Get the value of the data-area-id attribute for the <a> we are entering var areaId = evt.target.dataset['areaId']; // Use it to find the right circle, and remove the class "active" from its class attaribute document.getElementById(areaId).classList.remove("active"); }

 /* The default style for a circle */ svg circle { fill: lightgreen; } /* the style for when the circle is hovered */ svg circle.active { fill: green; }

 <div class="location__wrapper"> <div class="location__content"> <ul class="location__list"> <li class="location__list-item"><a data-area-id="1" class="location__list-link" href="https://www.antibes-juanlespins.com/">Antibes Juan-les-Pins</a></li> <li class="location__list-item"><a data-area-id="22" class="location__list-link" href="http://bezaudun.fr/">Bézaudun-les-Alpes</a></li> <li class="location__list-item"><a data-area-id="3" class="location__list-link" href="https://www.biot.fr/">Biot</a></li> <li class="location__list-item"><a data-area-id="21" class="location__list-link" href="https://bouyon.fr/">Bouyon</a></li> </ul> </div> </div> <svg width="200" viewBox="0 0 100 100"> <circle id="1" cx="25" cy="25" r="20"/> <circle id="22" cx="75" cy="25" r="20"/> <circle id="3" cx="25" cy="75" r="20"/> <circle id="21" cx="75" cy="75" r="20"/> </svg>