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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以参考悬停的父元素：

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

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

jsfiddle

Answer 3

您可以使用onmouseover和onmouseout事件触发器

<div id="dad">
 <div id="bro" onmouseover="showTheBG()" onmouseout="hideTheBG()"></div>
 <div id="sis" onmouseover="showTheBG()" onmouseout="hideTheBG()"></div>
</div>

和JS一样

function showTheBG() {
  document.getElementById('bro').style.backgroundColor = 'blue';
  document.getElementById('sis').style.backgroundColor = 'red';
}

这是codepen

Answer 4

如果有帮助，你可以试试这个

（文档）$。就绪（函数（）{ $（＆＃34; #br，＃sis＆＃34;）。hover（function（）{

//您的操作

}）; }）;

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

4 个答案: