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

Question

我正在尝试更改 .foo 的文本颜色当用户将鼠标悬停在 .bar 上时而且我不确定如何只使用 CSS 来做到这一点。我尝试使用 CSS 前置元素选择器 ~但这没有用。

http://jsfiddle.net/847E2/

<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 之前。

你可以改为这样做:

jsFiddle example

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

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