CSS颜色子对象悬停

我明白了：

<div id="father">
    <span class="child1"><span>
    <div class="child2"><div>
</div>

---

谢谢。在您的示例中，child1不是

.child2

的父项，这是您在选择器中使用空格所期望的

当

.child1

或

.child2

中的任何一个悬停时，以下选择器应能工作

#father:hover .child2 { ... }

---

如果您不想更改第二个子项的文本颜色，可以使用如下解决方法：

#father:hover .child2 {color: #eed847;}
.child2:hover {color: #000!important;}

---

在本例中，当您仅将鼠标悬停在

child2

上时，

child2

的文本将保持黑色。您可以在CSS中使用同级选择器

---

HTML的结束标记无效。我修改了你的HTML并添加了css以满足你的行为需求

HTML

<div id="father"> <span class="child1">child1</span>
    <div class="child2">child2</div>
</div>

.child1:hover + .child2 { #some css };

<div id="father"> <span class="child1">child1</span>
    <div class="child2">child2</div>
</div>

#father {
    width: 100px;
    height: 100px;
    background-color: cornflowerblue;
}
.child1 {
    background-color: green;
}
.child2, #father span.child1:hover + div.child2 {
    background-color: blue;
}
#father:hover .child2 {
    background-color: red;
}