Question

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

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

我有这样的事情：

示例

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属性将它们链接在一起并使用不显眼的事件处理程序，如下所示：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: