在 SVG 形状的悬停/鼠标悬停时，将一个类添加到 15 个形状/li 配对项目的列表项答案

【问题标题】：On hover/mouseOver of SVG shape add a class to a list item for 15 shape/li paired items在 SVG 形状的悬停/鼠标悬停时，将一个类添加到 15 个形状/li 配对项目的列表项
【发布时间】：2015-06-27 19:40:12
【问题描述】：

我有一个 SVG 地图，它有 15 种不同的形状，可以在悬停时改变不透明度。他们每个人都有自己的ID，并且都有相同的类名

<g>
  <a xlink:href="property-100aoa.html"><polygon id="mmAoa100" class="mmProp" fill="#1AA6C6" points="252.5,450 245,406 244,394.5 244,392 243,381 243,374.5 242,366.5 245.5,359.5 
  251,347.5 275.5,339.5 278,341 286.5,338 291,349 294,348.5 303.5,367 300,368.5 304,377.5 305,387 310,385.5 311,390.5 311.5,399 
  314.5,397 318,402 321.5,438.5 318,440.5 311,441.5 306.5,446.5 304,449.5 304,460 285.5,460   "/></a>
</g>

当您将鼠标悬停在 SVG 形状上时，我想更改列表中匹配属性名称的背景，反之亦然（当您将鼠标悬停在列表中的属性名称上时，匹配的 SVG 形状会发生变化）。

我是 javascript/jquery 的新手，我尝试过 .addClass("hover") 并将其添加到我的 css 中，但我必须在两个方向上都这样做（将鼠标悬停在形状上与悬停在列表项上）对于所有 15 种不同的属性，产生 30 种不同的功能。必须有更好、更有效的方法来做到这一点。

我的列表项/形状对之一的脚本在这里：

$(document).ready(function(){
$("#mmAoa100").hover(function(){ //hover over shape
    $("#pl100aoa").addClass("hover"); //adds class to list item
}, function(){
    $('#pl100aoa').removeClass("hover"); //removes class from list item
});

$("#pl100aoa").hover(function(){ //hover over list item
    $("#mmAoa100").addClass("hover");  //adds class to shape
}, function(){
    $('#mmAoa100').removeClass("hover"); //removes class from shape
}); 
});

当我将鼠标悬停在 ID 为 mmAoa100 的形状上时，这只适用于一个方向，而不是相反。即使它确实有效，使用我目前的方法，我也需要为所有 15 对复制它。

我的 CSS 是

.mmProp {
  opacity: .2;
}

.mmProp:hover {
  opacity: .7;
  transition-duration: 0.1s;
}

.mmProp.hover {
  opacity: .7;
  transition-duration: 0.1s;
}

.propertyList li.hover {
  font-size: 1.1em;
  background-color: #f1f1f1;
}

.propertyList li:hover {
  font-size: 1.1em;
  background-color: #f1f1f1;
}

我在这里将它保存为 jsfiddle：https://jsfiddle.net/r3hbchff/

请帮忙！提前致谢。

【问题讨论】：

为了让它更简洁，你可以扔掉 jQuery 并简单地将 :hover 添加到 css 选择器的末尾。请参阅W3Schools 了解更多信息。

标签： javascript jquery svg mouseover jquery-hover

【解决方案1】：

为此，您需要在多边形和锚点之间建立某种关系。恕我直言，我选择在这个答案中展示的设计远非很好，但它很好地展示了这种关系是如何运作的。

我创建了一个包含键值对的对象，其中键是多边形的 ID，值是应该突出显示的锚点的 ID。循环遍历对象中的所有元素并添加事件处理程序（定义额外的 add 和 remove 以节省微不足道的内存）。

$(document).ready(function(){
    var relations = {
        mmAoa100: "pl100aoa",
        mmHudson10: "pl1hudson",
        ...
    }

    function add(){
        var elem = this.relationKey ? $("#" + relations[this.relationKey]) : $(this);
        elem.addClass("hover");
    }

    function remove() {
        var elem = this.relationKey ? $("#" + relations[this.relationKey]) : $(this);
        elem.removeClass("hover");
    }

    $.each(relations, function(k, v){
       $("#" + k).hover(add, remove)[0].relationKey = k;
       $("#" + v).hover(add, remove);
    });
});

Updated FIDDLE

*注意我只设置了两个关系。

【讨论】：