在外部 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 psuedo-class，然后是子元素。

Updated jsFiddle example

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