悬停时范围文本不变

我刚刚开始学习CSS3和HTML5，现在我正试图让我的span文本在鼠标悬停在.linkdiv上时转换为另一种颜色，并使用以下代码。由于某种原因，它不起作用，我尝试了一些方法来让它发挥作用，但到目前为止运气不佳。

有人能帮我解决这个问题或给我指明正确的方向吗？

谢谢！

--

HTML

<div id="celebrity-list">
    <header>
        <h2>Celebrities</h2>
    </header>
    <div id="a">
        <span class="letter">A.</span>
        <div class="links">
        </div>
    </div>
</div>

CSS

#celebrity-list > div span.letter{
    position: relative;
    font: 22px Arial;
    color: #3a3a3a;
    -webkit-transition: color .3s ease-out;  
    -moz-transition: color .3s ease-out;  
    -o-transition: color .3s ease-out;  
    -ms-transition: color .3s ease-out;  
    transition: color .3s ease-out; 
}
#celebrity-list > div .links:hover #celebrity-list > div span.letter{
    color: #b43838;
}
#celebrity-list > div .links{
    position: relative;
    width: 190px;
    height: 342px;
    background: #f2f2f2;
    -webkit-transition: border .3s ease-out;  
    -moz-transition: border .3s ease-out;  
    -o-transition: border .3s ease-out;  
    -ms-transition: border .3s ease-out;  
    transition: border .3s ease-out; 
}