如何在父元素被徘徊时将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样式。