How can I apply a css transition to an element when its parent is hovered?

[dadiu]

I have the html:\[code\]<div class="social-section"> <a href="http://stackoverflow.com/questions/14034709/#" class="glyphicons facebook"><i></i></a> <a href="http://stackoverflow.com/questions/14034709/#" class="glyphicons twitter"><i></i></a></div>\[/code\]I'd like to have the icon fade to a different color when moused over, using a CSS3 transition. Unfortunately, I'm not sure how to make this work, if it's possible. My current attempt at the css is:\[code\].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;}\[/code\]In case this is helpful, here's the relevant section of the Glyphicons font css code:\[code\].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;}\[/code\]