如何强制两个元素同时徘徊？

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>