jquery - 如何在鼠标悬停时创建突出显示？

Question

在我的页面上，如果我将鼠标悬停在某个状态上，右侧的超链接将变为悬停样式。有人可以建议我如何使相反的事情发生..当我将鼠标悬停在右侧的一个超链接上时，状态会突出显示（就像我将鼠标悬停在状态本身上时一样）？

Answer 1

非常简单地使用 jQuery 的 .trigger();

例如：$('#A0').trigger('mouseover');将突出显示地图中的第一个元素（华盛顿）。

因此<a class="staffs staff-A0" href="#">Washington</a>，您可以将其添加到 mouseover 事件中：

var map_element_id = '#' + this.className.split('-')[1];
$(map_element_id).trigger('mouseover');

当然也需要处理 onmouseout 。有很多方法可以处理 map_element_id 变量的赋值。我建议您分配一个单独的属性来存储它而不是类名（也许是 data-map-id？）。在“-”上拆分适用于本示例，但假设您向包含“-”的元素添加更多类名，这将失败。

Answer 2

获取地图区域的id并触发mouseover事件。

$('.staff').mouseover(function() {
    var id = $(this).attr("class").split("-")[1];
    $("#"+id).trigger('mouseover');
});