当外部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 在 这里。

PS：我知道可以很容易地使用 jQuery 完成，但这是关于仅使用 CSS 完成它。

- frenchie

Answer 1

您需要在父元素上使用:hover伪类，然后跟随子元素。 更新的jsFiddle示例

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

- Josh Crozier