Question

当用户将鼠标悬停在.foo上时，我正在尝试更改.bar的文本颜色，而我不确定如何仅使用CSS执行此操作。我已经尝试使用CSS前面的元素选择器~，但这不起作用。

<div>
  <p class="foo">Foo</p>
  <ul class="bar"><li>Bar<li></ul>
</div>

.bar:hover~.foo {
    color: red;
}

编辑 - 我的要求已经改变。我更新了我的HTML结构，使.bar成为<ul>

Answer 1

兄弟选择器~不会选择它前面的元素，只会选择它后面的元素。因此，当鼠标悬停在元素.bar上时，无法选择元素.foo，因为它位于.bar之前。

你可以这样做：

div:hover :not(:hover) {
    color: red;
}

基本上，当将鼠标悬停在父color:red上时，这会将子元素的颜色设置为div。但是，它不会应用于您所在元素的:hover。这使得当您将鼠标悬停在同级元素上时，颜色似乎在变化。

Answer 2

+选择器是一个相邻的兄弟组合子选择器，允许您选择直接在另一个特定元素之后的元素。

如果使用任何元素，如果有.bar类名，则无关紧要。

注意：没有“previous sibling”选择器，这就是我更改DOM中元素顺序的原因。

.bar:hover + .foo {
    color: red;
}

Answer 3

这是使用CSS（不需要CSS3）的方法：

div:hover p{
    color: red;
}
.foo:hover{
    color: black;
}
div:hover p.bar{
    color: black;
}