Javascript 在鼠标悬停时更改CSS填充属性的优雅方式？

我有几个

svg

polygon

元素，每个元素可视地位于另一个

svg

路径

元素之上。有点像一张地图被城市分割（路径），每个城市都有一个图标（多边形）。多边形和路径元素在HTML中分别分组

每当在多边形上触发

mouseover

事件时，我想“填充”一条黄色的路径，该多边形在视觉上位于其上方

以下是我使用jQuery所做的工作：

$('#polygon1').mouseover(function(){
    $('#path1').css('fill','#ffd03b');
});

$('#polygon1').mouseleave(function(){
    $('#path1').css('fill','#3A84C5');
});

因为我有相当多的多边形和路径，所以代码会非常长并且重复

---

有更有效的方法吗？

您可以向多边形添加CSS属性，

class=“identifyPolygon”

然后使用：

$('.identifyPolygon').mouseover(function(){
        $('#path1').css('fill','#ffd03b');
});

$('.identifyPolygon').mouseleave(function(){
        $('#path1').css('fill','#3A84C5');
});

---

这似乎是针对其中任何一个目标的最快方法：

$（'polygon'）。悬停（函数（）{
$（this）.this（'path'）.css（'fill'，'#ffd03b'）；
}，函数（）{
$（this）.this（'path'）.css（'fill'，'#3A84C5'）；
});
要使其更简短、更容易理解，您可以做的第一件事是使用
悬停
事件，而不是使用单独的
mouseenter
和
mouseleave
事件

$('#polygon1').hover(function() {
    $('#path1').css('fill','#ffd03b');
}, function() {
    $('#path1').css('fill','#3A84C5');
});

要附加到许多元素，可以采取以下几种方法。首先，您可以扩展选择器以包含所有相关元素：

$('#polygon1, #polygon2, #polygon3, #etc').hover();

或者，我认为更好的方法是，将一个公共
类
添加到您希望具有此行为的每个元素中，然后在选择器中以其为目标。这意味着您只需确保新项目具有该类，而不必记住也要编辑JavaScript代码

$('.highlightable').hover();

为了进一步细化内容，而不是将颜色硬编码到代码中，我将使用类切换。这可以通过使用带有两个处理程序的
hover
来完成，这两个处理程序使用
addClass
和
removeClass
：

$('.highlightable').hover(function () {
  $(this).addClass('highlight');
}, function () {
  $(this).removeClass('highlight');
});

假设您只是更改高亮显示项的外观，而不是在
mouseenter
和
mouseleave
上执行不同的操作，那么使用单个处理程序切换类将更加优雅。jQuery似乎不想使用SVG，但您可以使用
.toggle（）
：

在实际操作中演示。
您可以向我们展示svg多边形和路径标记吗？
$('.highlightable').hover(function () {
  this.classList.toggle('highlight');
});