更改懸停時的屬性

Question

我想創建這個圓形的facebook按鈕，它可以在懸停時交換顏色。但我一直無法使用>來更改子元素，但我甚至不確定我是否正確地進行了操作。這裏是我的代碼

 <div class="alignright" id="facebook-round"> 
     <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css"   rel="stylesheet" /> 
     <a class="facebook-round" style="color: rgba(44, 33, 33, 1);" href="https://www.facebook.com/pages/Mio-Natural/613852868659014"> 
       &nbsp;&nbsp;&nbsp;<i class="fa fa-facebook fa-3x"></i> 
     </a> 
     </div> 

我做的CSS是這樣的

#facebook-round { 
width: 3.8em; 
height: 3.8em; 
border-radius: 4em; 
background: #807D7D; 
} 

#facebook-round i{ 
margin-top: 0.22em; 
margin-left: 0.12em; 
color:rgba(44, 33, 33, 1); 
} 

#facebook-round:hover { 
width: 3.8em; 
height: 3.8em; 
border-radius: 4em; 
background: rgba(44, 33, 33, 1); 
} 
.facebook-round { 
    text-decoration:none; 
} 
#facebook-round:hover >i { 
width: 3.8em; 
height: 3.8em; 
border-radius: 4em; 
color: #807D7D; 
} 

這裏提琴http://jsfiddle.net/D8ZKf/ 我想知道的另一件事情是，如果有可能基於子元素的目標父這意味着如果我有一個父元素的特定屬性，只應在子元素存在的情況下應用。我可以使用Javascript來做到這一點，但它可能使用普通的CSS？我的問題缺乏研究，對此感到遺憾。

Answer 1

變化烏爾css來

#facebook-round:hover i { 
width: 3.8em; 
height: 3.8em; 
border-radius: 4em; 
color: red; 
}  

> 

運營商直接子元素。選擇父母是不可能的。更好地使用類找出

Answer 2

CSS3無法定位的元素的父節點。下面是類似的問題更多的細節https://stackoverflow.com/a/1014958/2895892