Change a svg path when another element is hover-CodePudding

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

CodePudding user response：

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>