在外部div悬停时将样式应用于内部div [英] applying style to inner div on hover of outer div

问题描述

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

I have some HTML that looks like this:

<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做到这一点?

What I want to do is have the text of the inner div change color on hover of the outer div. How can I do this with CSS only?

jsFiddle是> 此处

The jsFiddle is here

PS:我知道可以很容易地用jQuery完成，但这仅与CSS有关.

推荐答案

您将使用父元素上的:hover 伪类，后跟子元素.

You would use the :hover psuedo-class on the parent element, followed by the child element.

更新的jsFiddle示例

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

这篇关于在外部div悬停时将样式应用于内部div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！