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

Question

我已经搜索了很远很远，但找不到解决方案。

我有两个div。一个在另一个的右边。在每个div中，我都有列表元素，但它们绝不是父母或兄弟姐妹，所以我不能使用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');
  }
});

样本

Answer 2

Jquery是一个相当大的库。我强烈建议你在纯javascript中这样做，如果你没有在你的网页的其他任何地方使用Jquery。这是我创建的一个例子，当一个div用一个简单的If语句悬停时，它会改变另一个div的类。

https://jsfiddle.net/c16rvt0y/1/

function highlightDiv(){
    if (document.getElementById("highlightMe").className === "otherDiv"){
       document.getElementById("highlightMe").className = "otherDiv otherDivHighlighted"
  } else {
     document.getElementById("highlightMe").className = "otherDiv"
  }
}

下面是一个示例，该示例针对函数调用的单独div

：

https://jsfiddle.net/c16rvt0y/2/

function highlightDiv(highlightMeID){
    if (document.getElementById(highlightMeID).className === "otherDiv"){
       document.getElementById(highlightMeID).className = "otherDiv otherDivHighlighted"
  } else {
     document.getElementById(highlightMeID).className = "otherDiv"
  }

}