jquery - 递归鼠标悬停过多

Question

我有以下代码来突出显示地图的不同区域（例如，当一个状态被财政分离，并且用户在状态的一部分上进行鼠标悬停时，必须突出显示整个状态）：

$(function() {
$('#area-a').mouseover(function(e) {
    $('#area-b').mouseover();
    $('#area-c').mouseover();
}).mouseout(function(e) {
    $('#area-b').mouseout();
    $('#area-c').mouseout();
});


$(function() {
$('#area-b').mouseover(function(e) {
    $('#area-a').mouseover();
    $('#area-c').mouseover();   
}).mouseout(function(e) {
    $('#area-a').mouseout();
    $('#area-c').mouseout();
});

});

所以，我得到了太多递归错误，我知道为什么会这样，我发现 event.stopPropagation() 是解决它的方法，但是如果我把它放在函数的开头，它不会突出显示所有这些地区，所以我被困住了。这是突出显示不同区域的正确方法还是应该将 stopPropagation 事件放在其他地方？