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

Posted 2023-03-06

【中文标题】在外部 div 悬停时将样式应用于内部 div [重复]

【英文标题】：applying style to inner div on hover of outer div [duplicate]

【发布时间】：2013-12-16 01:55:32

【问题描述】：

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

.TheInnerClasscolor:white;

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

jsFiddle 是here

PS：我知道用 jQuery 可以很容易地做到这一点，但这是关于只用 CSS 做的。

【参考方案1】：

您可以在父元素上使用:hover psuedo-class，然后是子元素。

Updated jsFiddle example

.TheOuterClass:hover .TheInnerClass 
    color:blue;