如何在父元素被徘徊時將css轉換應用於元素？

Question

我有HTML：

<div class="social-section"> 
    <a href="#" class="glyphicons facebook"><i></i></a> 
    <a href="#" class="glyphicons twitter"><i></i></a> 
</div> 

我想，當鼠標滑過，使用CSS3過渡到有圖標淡出，以不同的顏色。不幸的是，如果可能的話，我不確定如何完成這項工作。我在CSS當前的嘗試是：

.social-section * i:before { /* Apply this to the i:before, when the a is hovered */ 
    -webkit-transition: all 0.3s ease-in; 
    -moz-transition: all 0.3s ease-in; 
    -ms-transition: all 0.3s ease-in; 
    -o-transition: all 0.3s ease-in; 
    transition: all 0.3s ease-in; 
} 

.social-section a i:before { 
    color: red; 
} 

.social-section a:hover i:before { 
    color: black; 
} 

如果這是有益的，這裏的Glyphicons字體CSS代碼的相關部分：

.glyphicons { 
    display: inline-block; 
    position: relative; 
    padding: 0 0 5px 35px; 
    *display: inline; 
    *zoom: 1; 
} 
.glyphicons i:before { 
    position: absolute; 
    left: 0; 
    top: 0; 
    font: 20px/1em 'Glyphicons'; 
    font-style: normal; 
    color: red; 
} 

Answer 1

答案是，在大多數瀏覽器的大多數版本中，僞元素無法進行轉換。這個問題令人沮喪，Chris Coyier（css-tricks.com）的當前狀態爲keeping a page open。

截至截稿時，僞元素轉換由支持：

• 的Firefox 4.0+
• 鉻26+
• IE 10+

您可以 confirm this上

您瀏覽器。

Answer 2

僞代碼，因爲我不知道應該如何行動根據您的quesiton ...

把你的元素必須要影響過渡的CSS代碼（即不是父）

#child { 
    // transitions.... 
} 

然後做

#parent:hover #child { 
    // your changes 
} 

當父元素徘徊，更改孩子。孩子現有的過渡效果將用於此，我認爲這是您的目標。另外，如果您要在圖標之間轉換，則需要更改sprite-image的位置，我假設您正在使用該位置，而不是更改color樣式。