用css懸停更改顏色而不影響子div

Question

我原來的問題涉及到div中的引導圖標，它在懸停時改變顏色。 爲簡單起見，我做了後續代碼的jsfiddle說明問題

HTML：

<div id="parent"> 
    <div id="child"> 
    </div> 
</div>​ 

CSS：

#parent{ 
background-color:red; 
width:100px; 
height:100px; 
} 

#parent:hover #child{ 
background-color:blue; 
display:block;  
} 
#child{ 
background-color:transparent; 
width:10px; 
height:10px; 
display:none; 
border: 1px solid black; 
} 

的jsfiddle可以發現here

問題：

這段代碼的結果並不是我想要完成的。我想#child出現background-color: tranparent，但#parent將顏色更改爲藍色。

我知道我的:hover是錯的，但我要如何應用在一個:hover（的#parent改變顏色和顯示#child）2個不同的東西？

Answer 1

您必須使用兩個選擇，你不能只有一個做到這一點，所以你可以寫類似以下內容：

#parent:hover{ 
background-color:blue; 
} 
#parent:hover #child { 
display:block; 
} 

演示：http://jsfiddle.net/qTdkt/2/