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

【问题标题】：How to force two elements become hovered at the same time?如何强制两个元素同时悬停？
【发布时间】：2015-08-28 00:37:38
【问题描述】：

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

例如：

<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，拜托。

【问题讨论】：

On a CSS hover event, can I change another div's styling? 的可能重复项
How to affect other elements when a div is hovered的可能重复

标签： javascript jquery html css hover

【解决方案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>

【讨论】：

我曾在其他线程中看到过此解决方案，但它从未在我的代码中起作用。但是你简化一切的方式，就像一个魅力。我终于学会了这个逻辑！谢谢你，兄弟。

【解决方案2】：

你可以参考被悬停的父元素：

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

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

jsfiddle

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

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

$(document).ready(function(){ $( "#bro,#sis" ).hover(function() {

//你的操作

}); });

【讨论】：