Question

示例fiddle hover示例a将第一段的背景颜色更改为红色

由于a和#p1是兄弟姐妹
如果有任何父子（立即或嵌套）b / w这种技术（通过更改b / w 中的选择器）将起作用元素

但我正在寻找的是：
当鼠标悬停在a上时，有没有办法改变第二段的背景颜色;

注意：我知道我可以使用JavaScript / jQuery轻松完成此操作，但我正在寻找 css 方式。

Answer 1

CSS4 will provide this functionality。然而，遗憾的是，它甚至还没有最终确定的规范，也没有在任何浏览器中实现。（即使它在浏览器中实现，也需要一些时间才能获得足够的安装基础，以便在日常CSS代码中使用它。）

现在你唯一现实的选择是Javascript。（当然，这种事情在jQuery中很容易）

Answer 2

更新：仍然有一些非常时髦的Finagling！

信不信由你，这段代码适用于FF，Chrome，IE9和10 来做你想做的事情（see the example）。是的，这是Pumbaa80指出的“黑客”。但我喜欢为看似不可能的事情制作“工作”黑客。是的，因为“hackishness”它不会在所有情况下都有效（也许不是在你的“真实”世界的情况下）。

更新实现了什么

我相信我在FF和Chrome中制定了一个小错误，当不仅仅<a>时，它会导致它仍然显示。
我想通过在body:before（z-index: -1）和#p1 div之间的z-index: -2处插入#out伪元素来弄清楚如何使IE工作家长。要使用，:before必须设置background-color，然后设置opacity: 0（如果不是这样，就好像它甚至不存在“阻塞”目的一样）。意识到此阻止至少有两个副作用 （可能还有其他几个）:( a）#p1中的链接将无法点击，并且（b）正如评论中指出的OP，#p1中的文字将无法选择。

以下是基本上仅针对#sec悬停效果的修订代码，但我确实在此处添加了原始#p1悬停效果的组合代码，现在触发#out:hover。但是，代码表明只有<a> 内部 #out会触发#out:hover：

body:before { /* used to "block" hover of #p1 triggering */
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: cyan;
  opacity: 0;
}

#out {
  height: 0; /* no height of its own; helped the FF/Chrome occasional miss-hover bug */
}

#out:hover #p1, /* revised #p1 hover code */
#out:hover + div p { /* hover of #out triggers for #sec */
  background-color: red;
}

#out a { 
  float: left; /* helps cause #out to only trigger on anchor */
}

#p1 {
  float: left; /* clears the anchor */
  width: 100%; /* keeps it normal div width of 100% */
  position: relative; /* needed for z-index */
  z-index: -2;  /* allows #out to only trigger on anchor and not #p1 hover */
}

#sec {
  clear: left; /* clears floats above it so layout remains as it was */
}

显然，“不在关系中”的元素是纯CSS解决方案的主要问题。我在这里尝试实现的目标（主要是成功地用于主浏览器...谁知道移动等浏览器）是利用父元素关系以这种方式来悬停仅<a>（在第一个父元素内）是父元素本身:hover的唯一触发器，因此我可以使用它来为所有<p>元素执行悬停效果

有没有办法根据CSS设置不同元素的样式：悬停选择器（悬停元素和受影响者不在关系中）

2 个答案:

更新：仍然有一些非常时髦的Finagling！