javascript - JQuery 使用其他元素激活悬停状态

Question

我必须在基于 svg 的元素 map 上激活悬停。

所以我得到了可以改变悬停在选定区域中的区域颜色的 map 。在这张 map 附近，我得到了一个区域列表作为链接，必须突出显示悬停在该链接上的 map 上的相对区域。

fiddle 示例 https://jsfiddle.net/fgsh896b/

我得到了这样的东西:

示例

function mouseEnt(id) {
	$('#' + id).trigger('hover');
}

.item {
  width:100px;
  height: 100px;
  border: 1px solid #000; 
  position: relative;
  margin-left: 10px;
  float: left;
}
.item:hover {
  background-color: #000;
}
#link {
 top: 150px;
 position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1" class="item">
 Item 1
</div>
<div id="2" class="item">
 Item 2
</div>
<div id="link">
  <a href="#" class="link" onMouseEnter="mouseEnt('1')">Link1</a>
  <a href="#" class="link" onMouseEnter="mouseEnt('2')">Link2</a>
</div>

我的函数是错误的，我尝试过其他jquery函数，但也许我的逻辑不正确。如何达到这个目标？

Answer 1

正如 @j08691 在您的问题的评论中链接到的那样，您不能通过在 JS 中伪造事件来触发 CSS :hover 伪选择器。

但是您可以做的是当您将鼠标悬停在所需链接上时手动在目标元素上设置一个类。为了改进逻辑，您可以使用 data 属性将它们链接在一起并使用不显眼的事件处理程序，如下所示:

$(function() {
  $('#link a').hover(function() {
    $('#' + $(this).data('rel')).toggleClass('hover');
  });
});

.item {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  position: relative;
  margin-left: 10px;
  float: left;
}

.item:hover,
.item.hover {
  background-color: #000;
}

#link {
  top: 150px;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="1" class="item">Item 1</div>
<div id="2" class="item">Item 2</div>
<div id="link">
  <a href="#" class="link" data-rel="1">Link1</a>
  <a href="#" class="link" data-rel="2">Link2</a>
</div>