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

Question

在my page上，如果我将鼠标悬停在状态上，则右侧的超链接将更改为悬停样式。有人可以建议我如何做出相反的事情......当我将鼠标悬停在右边的一个超链接上时，状态会突出显示（当我将鼠标悬停在状态本身上时）？

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并触发鼠标悬停事件。

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