Так пашет:
<span class="in"><a href="#1" class="out">The Apple</a></span>
Так нет:
<a href="#1" class="in">The Apple</a>
Почеу во втором случае не работает?
по твоему правилу css получается "для всех элементов А, которые являются чайлдами элементов с классом in - при наведении мыши поменять цвет". во втором случае у тебя класс in ставится на элемент А, а должен ставиться на его родителя какого-нибудь, т.е. как в первом случае