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

例如：

<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：悬停有效并且两个图像显示在每个元件上。如果鼠标结束#sis，则相同。

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

来源

2015-08-27 rdllngr

[在CSS悬停事件，我可以更改另一个div的样式？]（http://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-另一个divs-styling） – Madness

[如何影响其他元素当一个div徘徊]的可能重复（http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div -is-hovered） – dave

如果您没有#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>

来源

2015-08-27 15:22:00 Akshay

我在其他线程中看到过这个解决方案，但它从来没有在我的代码中工作过。但是，你简化一切的方式，就像一个魅力。我终于学会了这个逻辑！谢啦兄弟。 – rdllngr

你可以参考的父元素被盘旋：

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

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

jsfiddle

来源

2015-08-27 15:22:04

工作！谢谢！ – rdllngr

您可以使用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

来源

2015-08-27 15:29:52

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

$（文件）。就绪（函数（）{$ （“＃bro，＃sis”）.hover（function（）{

//您的操作

}）; }）;

来源

2015-08-27 16:37:38

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

回答

相关问题