当另一个元素悬停时更改 svg 路径

Question

我post回答我的第一个问题，因为我的网络语言水平一般，而且我不知道所有的微妙之处。我不知道我是否应该触摸 CSS 这是我的第一个想法，或者我是否应该触摸 Javascript 但我对此知之甚少...... 当我将鼠标悬停在页面上的另一个元素上时，我想更改 svg 文件中地图的区域。当我将鼠标悬停在“chateauneufbeta”class 上时，我已经在尝试更改 .maptest class 的填充。我想做的是下面：/我想做的：当 class chateauneufbeta 悬停在它上面时，它会改变 .maptest class[=40= 的路径]/

我的地图区域有两个class：.ZoneVerte 和.maptest，选择更自由。

我翻译了一部分CSS来帮助你（我是法国人^^）

我使用 Wordpress 获取信息。这是我当前 CSS 和 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; }

我的 HTML 代码的一部分，侧面有城市列表（参见 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>

最后我期望的结果如下：

map change color

Answer 1

这里有一些简单的代码，展示了如何做你想做的事。我在代码中添加了注释以描述每个步骤的作用。

// 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>

更新

双向：

// 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 attribute
  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 attribute
  document.getElementById(areaId).classList.remove("active");
}



// Find all the <circle> elements in the list
var circles = document.querySelectorAll("svg circle");

// To each of them, add an event handler for when the mouse enters its box, and also when it leaves
circles.forEach(item => {
  item.addEventListener("mouseover", circleMouseOver);
  item.addEventListener("mouseout", circleMouseOut);
});

function circleMouseOver(evt) {
  // Get the id of the circle
  var areaId = evt.target.id;
  // Use it to find the right list item, the one with data-area-id="<id>", and add the class "active" to its class attribute
  document.querySelector('.location__list-item a[data-area-id="'+areaId+'"]').parentElement.classList.add("active");
}

function circleMouseOut(evt) {
  // Get the id of the circle
  var areaId = evt.target.id;
  // Use it to find the right list item, the one with data-area-id="<id>", and remove the class "active" from its class attribute
  document.querySelector('.location__list-item a[data-area-id="'+areaId+'"]').parentElement.classList.remove("active");
}

.location__list-item:hover,
.location__list-item.active
{
  background-color: green;
}


/* The default style for a circle */
svg circle {
  fill: lightgreen;
}

/* the style for when the circle is hovered */
svg circle:hover,
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>

当另一个元素悬停时更改 svg 路径

Change a svg path when another element is hover

javascript

css

svg