在外部 div 悬停时将样式应用于内部 div [重复]

我有一些看起来像这样的 HTML：

<div class="TheOuterClass">
    <div class="TheInnerClass">some text</div>
</div>

使用以下 CSS：

.TheOuterClass{
    width:100px;
    padding:5px 5px;
    background:black;}

.TheOuterClass:hover{
    pointer:cursor;
    background:red;
    color:yellow;}

.TheInnerClass{color:white;}

我想要做的是让内部 div 的文本在外部 div 悬停时改变颜色。我怎样才能只用 CSS 来做到这一点？

jsFiddle 是here http://jsfiddle.net/skD7Z/

PS：我知道使用 jQuery 可以轻松完成，但这仅是使用 CSS 完成的。

你会使用:hover https://developer.mozilla.org/en-US/docs/Web/CSS/%3ahover父元素上的伪类，然后是子元素。

更新了 jsFiddle 示例 http://jsfiddle.net/JoshC/skD7Z/1/

.TheOuterClass:hover .TheInnerClass {
    color:blue;
}