我發布我的第一個問題是因為我的網路語言水平一般，而且我不知道所有的微妙之處。我不知道我是否應該接觸 CSS，這是我的第一個想法，或者我是否應該使用 Javascript，但我對此知之甚少……我想在懸停時更改 svg 檔案中地圖的區域在頁面上的另一個元素上。當我將滑鼠懸停在“chateauneufbeta”類上時，我已經在嘗試更改 .maptest 類的填充。我正在嘗試做的是以下：/我想要做的：當類 chatauneufbeta 懸停在它上面時會改變 .maptest 類的路徑/
我的地圖區域有兩個類：.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 Chateauneuf territory*/
.ZoneVerte{
fill: #93c020;
opacity: 0.8;
}
/*Colour of the Chateauneuf area when it is flown over */
.ZoneVerte:hover{
fill: #93c020;
opacity: 1.0;
}我的 HTML 代碼的一部分，旁邊是城市串列（見帖子底部的圖片）：
<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/">Chateauneuf</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>我最終期望的結果如下：
地圖改變顏色
uj5u.com熱心網友回復：
這是一些簡單的代碼，展示了如何做你想做的事。我在代碼中添加了注釋來描述每個步驟的作用。
// 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/372590.html
標籤：javascript css svg