Javascript:悬停元素，更改不相关元素中的类

Question

我已经进行了广泛的搜索，但找不到解决方案。

我有两个 div。一个在另一个的右边。在每个 div 中，我都有列表元素，但它们绝不是 parent 或 sibling ，所以我不能使用 CSS。

有没有人有一个解决方案，我可以在我的 html 文档中的任何地方有一个链接，当悬停时，更改另一个元素的类，无论它放在 html 文档中的什么位置？例如Javascript。

我的想法是，当我将鼠标悬停在左侧列表中的某个元素时，它会突出显示右侧列表中被认为与之相关的元素。

Answer 1

有很多方法可以实现这一点。我创建了一个示例，该示例使用 jQuery 为 mouseenter mouseleave 事件(基本上是 hover)操作另一个元素上的类。

<div class="red">
  x
</div>
<div class="green">
  y
</div>

$('.red').on('mouseenter mouseleave', function() {
    if ($('.green').hasClass('hover')) {
    $('.green').removeClass('hover');
  } else {
    $('.green').addClass('hover');
  }
});

Sample