Question

我搜索得很远，找不到解决方案。

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

Answer 2

Jquery是一个相当大的库。如果您没有在网页中的任何其他位置使用Jquery，我强烈建议您使用纯JavaScript进行此操作。这是我创建的一个示例，当另一个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"
  }
}

这是一个示例，它针对单独的divs depanding，函数调用哪一个：

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

}

Javascript：悬停元素，更改无关元素中的类

2 个答案: