html - 将鼠标悬停在同一级别的另一个元素上时更改文本颜色

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>

score 1 · Accepted Answer

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

你可以这样做：

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

基本上，这是在将color:red鼠标悬停在父元素上时将子元素的颜色设置为div. 但是，它不会应用于:hover您所在的元素。当您将鼠标悬停在兄弟元素上时，这看起来好像颜色正在发生变化。

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

如果有 .bar 类名，是否使用任何元素都没有关系。

注意：没有“前一个兄弟”选择器，这就是我更改 DOM 中元素顺序的原因。

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

3 回答 3