使用 CSS 悬停在子级上时删除父级上的悬停样式 [重复]

Question

我有一个小提琴：http://jsfiddle.net/a80h6pts/1/

<style>
.myhover {
  width: 120px;
}
.myhover:hover p{
    color: #FED242!important;
}
</style>
<div id="divParent" class="myhover">
    <p>Some text</p>
    <p>Text text text</p>
    <div id="divChild" class="myhover">
        <p>Example text</p>
    </div>
</div>

当我的鼠标激活#divParent 的over 时，我希望所有<p> 标记都改变颜色，除了#divChild 中的<p>。然后，当我将鼠标移动到#divChild 时，我希望其中的所有<p> 标签都改变颜色，并将#divParent 的<p> 恢复为原来的颜色。

我无法删除或更改类 .myhover 或使用 javascript。我怎样才能只用 CSS 做到这一点？

编辑：

很糟糕，有些人认为我必须使用 js。我可以使用对 html/css 影响最小的 js (jquery)。

Answer 1

使用 jQuery，您可以使用：

$('#divParent').mouseover(function () {
    $('#divParent > p').addClass('hover')
}).mouseout(function () {
    $('#divParent > p').removeClass('hover')
})
$('#divChild').mouseover(function (e) {
    e.stopPropagation();
    $('#divChild > p').addClass('hover')
}).mouseout(function (e) {
    $('#divChild > p').removeClass('hover')
})

.myhover {
    width: 120px;
}
.hover {
    color: #FED242;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="divParent" class="myhover">
    <p>Some text</p>
    <p>Text text text</p>
    <div id="divChild" class="myhover">
        <p>Example text</p>
    </div>
</div>

正如其他人已经指出的那样，由于没有父 CSS 选择器，您不能单独使用 CSS。