如何強制兩個元素同時徘徊？

例如：

<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

如何強制兩個元素同時徘徊？

回答

相關問題