javascript - 如何强制两个元素同时悬停？

Question

如何强制两个不同的元素同时悬停？

例如:

<div id="dad">

     <div id="bro"></div>
     <div id="sis"></div>

</div>

#bro:hover {
     background: url(imgBRO.jpg);
}

#sis:hover {
     background: url(imgSIS.jpg);
}

如果我将鼠标放在#bro 上，#sis:hover 处于事件状态并且两个图像都会出现在每个元素上。如果鼠标悬停在 #sis 上，则相同。

有人可以帮助我吗？解决方案可以是 CSS 或 JS。

Answer 1

如果您没有#dad 的任何其他子元素，您可以这样做。当您将鼠标悬停在任何元素上时，这将触发 hover

#dad {
  display: inline-block;
}
div div {
  width: 100px;
  height: 100px;
  background: orange;
}
#dad:hover #bro {
  background: red;
}
#dad:hover #sis {
  background: green;
}

<div id="dad">

  <div id="bro"></div>
  <div id="sis"></div>

</div>