爲什麼通用兄弟組合並不總是工作？

我有四個div，我想在懸停時改變它們的寬度和高度，所以你懸停的那個擴大了，所有其他的縮小了一個擴展的懸停。當我將鼠標懸停在第一個div上時，我設法讓它工作，但是當我嘗試與其他三個相同時，沒有任何反應。我的HTML：爲什麼通用兄弟組合並不總是工作？

<div id="main"> 
     <div id="mainOne"> 
      <h3>text</h3> 
     </div> 
     <div id="mainTwo"> 
      <h3>text2</h3> 
     </div> 
     <div id="mainThree"> 
      <h3>text3</h3> 
     </div> 
     <div id="mainFour"> 
      <h3>text4</h3> 
     </div> 
    </div>

我的CSS：

/* HOVER 1 */ 

#mainOne:hover{ 
width:748px; 
height:600px; 
} 

#mainOne:hover + #mainTwo{ 
width:248px; 
height: 600px; 
} 

#mainOne:hover ~ #mainThree{ 
height:200px; 
} 
#mainOne:hover ~ #mainFour{ 
height:200px; 
} 

/* END HOVER 1 */ 

/* HOVER 2 */ 
#mainTwo:hover{ 
width:748px; 
height:600px; 
} 

#mainTwo:hover + #mainOne{ 
width:248px; 
height: 600px; 
} 
#mainTwo:hover + #mainThree{ 
height:200px; 
} 
#mainTwo:hover ~ #mainFour{ 
height:200px; 
} 

/* END HOVER 2 */

所以，當我將鼠標懸停在銘萬，一切都變了，但是當我將鼠標懸停在mainTwo只是mainTwo變化和弄亂了一切。我究竟做錯了什麼？謝謝。

來源

2012-11-06 hpdobrica

CSS可以出現在DOM後只（currently）目標元素，因此#mainTwo + #mainThree將工作，但#mainTwo + #mainOne不能。

要定位以前的兄弟姐妹，您必須將兄弟姐妹包裹在另一個父代元素中，然後根據該父代的懸停方式對之前的兄弟姐妹進行樣式設計。

div > div { 
    border: 1px solid #000; 
    padding: 0.5em 1em; 
    width: 80%; 
    margin: 0 auto; 
    color: #f00; 
} 

#main:hover > div { 
    width: 50%; 
} 

#main:hover > div:hover ~ div { 
    width: 50%; 
} 

#main:hover > div:hover { 
    width: 80%; 
}

JS fiddle proof-of-concept

來源

2012-11-06 13:35:55

我現在明白問題是什麼，我注意到現在Everything縮小了，但是mainOne，因爲它在mainTwo之前，但是看起來這個解決方案對我而言有點太複雜，所以我會花時間理解它。非常感謝。 – hpdobrica

您所有的mainTwo規則與:hover使用相鄰的兄弟組合子。

只有#mainTwo + #mainThree可以匹配，因爲#mainOne或#mainFour是#mainTwo的下一個兄弟。

如果您使用了通用兄弟組合器（~），那麼您也可以匹配#mainFour。

由於#mainOne先#mainTwo，你不能依賴於的#mainTwo存在的規則相匹配。

來源

2012-11-06 13:34:14 Quentin

謝謝你，我改變了組合子，但我仍然得到同樣的結果。 – hpdobrica

爲什麼通用兄弟組合並不總是工作？

回答

相關問題