Jquery 如何同时高亮显示图像地图上的多个区域

我正在使用自定义版本的美国地图。不幸的是，美国的一些州（如罗德岛州）非常小。出于这个原因，我在地图右侧创建了一些方框，其中包含一些较小州的缩写

我希望能够做到的是，当用户将鼠标悬停在长方体或状态上时，同时高亮显示长方体和贴图

<area href="#" title="RI" shape="poly" coords="617,141, 617,138, 617,135, 616,131, 620,130, 621,131, 623,133, 625,136, 623,138, 622,137, 622,139, 620,140, 617,141, 617,141"/>
<area href="#" title="RI" shape="rect" coords="728,164,760,182"/>

不幸的是，这不起作用，而且事件似乎从未发生过——尽管我尝试了一些变化

如何同步这些元素（以通用方式）并使所有标题相同的区域标记在鼠标悬停/悬停时都高亮显示？

尝试：

$('area').mouseover(function() {
    $('area[title="'+$(this).attr('title')+'"]').mouseover();
});

这将处理所有

区域

元素上的

鼠标悬停

事件，然后使用title属性在具有相同标题的所有匹配区域上触发

鼠标悬停

事件

默认行为应该满足您的要求（请参见演示页面-第一个示例是美国地图）

---

在小提琴中：

我知道这是一个老问题，但正如：
maphilight函数有一个groupBy函数。在您的情况下，您可以执行以下操作：

$('.mapimage').maphilight({ groupBy: 'title' });

---

它将根据区域的标题进行分组（尽管您可以选择区域的任何属性）

这看起来是一个很好的解决方案。不幸的是，似乎从未发生过与该地区有关的事件。我被难住了(

$('.mapimage').maphilight({ groupBy: 'title' });