使用css懸停在第一個孩子上時更改其他子元素

我試圖影響第三個孩子使用懸停在div的第一個孩子。有誰知道一種方法來做到這一點，只是使用CSS？使用css懸停在第一個孩子上時更改其他子元素

CSS 

    /* works */ 
#firstp + p 
{ 
background:#dddddd; 
} 

#firstp:hover + p 
{ 
background:#ff0000; 
} 

#firstp + p + p 
{ 
background:#dddddd; 
}  

    /* doesnt work */ 

#firstp:hover + p + p 
{ 
background:#ff0000; 
} 


HTML 

<body> 
<p>The first paragraph.</p> 
<p>The second paragraph.</p> 
<p>The third paragraph.</p> 
</body>

來源

2013-02-20 Andrew

http://jsfiddle.net/fNxGa/5/

更改

#firstp:hover + p + p

到

#firstp:hover ~ p ~ p

~的工作方式相同+選擇，但~限制較少，因爲它選擇下面的懸停元素的任何p。在+中，只有下一個兄弟（在復位元素之後）被選中。

來源

2013-02-20 06:56:26

感謝您的好評！ – Andrew 2013-02-20 07:12:41

其實，這個原因的唯一原因是因爲Chrome與'：hover'和'+'有關。因爲'#firstp：hover + p + p'仍然會選擇第三個'p'（並且只有第三個'p'），所以在正常情況下，您不必將'+'更改爲'〜' ）。 – BoltClock 2013-02-20 08:55:36

我註釋掉

#firstp:hover + p 
{ 
    background:#ff0000; 
}

，它似乎是工作（即使沒有評論）：
Fiddle

來源

2013-02-20 06:53:03

這很奇怪，我只是在火狐中打開你的小提琴，它工作正常，但它不適用於我的鉻。感謝你的回答！ – Andrew 2013-02-20 07:11:35

這是真的......我只在Firefox中測試過......但[Jose's]（http://stackoverflow.com/a/14973984/1581050）代碼有效！ – 2013-02-20 07:16:13

使用css懸停在第一個孩子上時更改其他子元素

回答

相關問題