在外部div悬停时将样式应用于内部div

Question

我有一些看起来像这样的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

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

Answer 1

您可以在父元素上使用:hover伪类，然后使用子元素。

Updated jsFiddle example

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