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

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>

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

如果对你有帮助，你可以试试

$(文档).ready(函数(){ $( "#bro,#sis" ).hover(函数() {

//你的操作

}); });

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

How to force two elements become hovered at the same time?

html

javascript

css

jquery

hover