Question

我认为现在没有一个问题可以解决这个问题;但如果有，请指出我，我会关闭这个。

无论如何，假设这样的HTML：

<div>
  <div class="a" style="float:left;"></div>
  <div class="b" style="float:left;"></div>
  <div class="c" style="float:left;"></div>
  <div style="clear:both;"></div>
</div>

我是否可以定义任何css规则，这些规则在悬停时会改变OTHER元素的样式。所以，像

  .a:hover {
     // change bg colors of .b and .c
  }

我知道我可以用javascript中的悬停事件做到这一点;但我希望只有一个css解决方案。如果你可以指出css规范的某些部分说这是不可能的，那么我仍然会将其标记为答案。（即使我承认我没有阅读整篇文章;我确实读了一些内容。）

编辑：每个人都标记出来的答案是正确的答案;但它们在Chrome / Safari中不起作用（但是IE8很好......去图：P）。见这里：Why doesn't this CSS selector work: a:hover ~ span?

Answer 1

我是否可以定义任何css规则，这些规则在悬停时会改变OTHER元素的样式

在这种情况下，您可以使用adjacent sibling selectors（因为b和c 关注 a）。

.a:hover + .b,
.a:hover + .b + .c { }

您还可以使用CSS 3中的general sibling combinator

.a:hover ~ div {}

虽然这仍然要求您首先悬停的元素。

我知道我可以通过javascr中的点击事件
来做到这一点

鼠标悬停事件会更有意义

如果你能指出css规范的某些部分，说明这是不可能的

规格告诉你什么是可能的。他们很少陈述不能做的事情（因为提供一份不可能的详尽清单会使所有规格变得庞大）

Answer 2

使用此：

.a:hover + .b,
.a:hover + .b + .c,
{
    // styles of .b and .c
}

有关兄弟组合器的更多信息：http://www.w3.org/TR/css3-selectors/#sibling-combinators

Answer 3

Myabe它会帮助你一点：

.a:hover + .b {
     background-color:red;
 }
.a:hover + .b + .c {
    background-color:red;
 }

观看结果：http://jsfiddle.net/uNZSX/

将css规则应用于其他元素

3 个答案: