CSS：使用element:hover伪类选择不相关的元素

Question

我在网页上有一个按钮。我想使用CSS伪类来使文档的其他部分在光标悬停在按钮上时发生变化。这是我尝试过的代码：

<div id="content">
    <p id="foo">blah blah blah</p>
    <p id="blah">blah blah blah</p>
</div>

<div id="navigation-panel">
    Hover over a button!
    <div class="buttons">
        <div id="button1">button1</div>
        <div id="button2">button2</div>   
        <div id="bar">bar</div>
    </div>
</div>

对应的样式表如下：

#bar:hover #foo {
    color: green;
}

当然，这不起作用，因为在CSS中，只能使用格式为A B的选择器来选择元素A的后代元素B。通过新的CSS3规范，可以使用一些新的伪类来选择元素A的同级元素。

但是，有没有办法选择更像是远房表兄弟的一个或多个元素B？

我想到了几种解决方案。第一种：使用Javascript。这对我来说不太吸引人，因为我希望我的页面在没有启用JS的情况下完全可用，以防有人在浏览器中禁用了JS。另外，我希望保持事情的简单性。第二种解决方案：将foo div放在bar div内部，然后使用position: absolute将foo移动到我想要的位置。这是一种混乱的解决方案，原因显而易见。

- jayhendren

---

你可以使用JS使页面具有功能性并添加此功能。 - Blender

是的，这似乎是完成此任务的最佳（也是唯一）方法。 - jayhendren

Answer 1

是的，但不是用CSS，而是使用JavaScript。这是一个jQuery示例。

$('#bar').hover(
  function(e) {
    $foo = $('#foo');
    $foo.data('prevColor', $foo.css('color'));
    $foo.css('color', 'green');
  },
  function(e) {
    $foo = $('#foo');
    $foo.css('color', $foo.data('prevColor'));
  }
);

- scottheckel

---

用JS做这个很容易。我甚至觉得不需要jQuery。 - jayhendren

当然可以。这只是为了举例更加简单和清晰。 - scottheckel

Answer 2

你可以将它放在容器内，然后绝对定位到容器的DOM流之外，以达到相同的效果。虽然不是完美的解决方案，但这是可行的：

<div id="content">
    <p id="blah">blah blah blah</p>
</div>

<div id="navigation-panel">
    Hover over a button!
    <div class="buttons">
        <div id="button1">button1</div>
        <div id="button2">button2</div>   
        <div class="foo" id="bar">bar<p id="foo">blah blah blah</p></div>
    </div>
</div>

#content {
    height:80px;
}

#foo {
    position:absolute;
    top:40px;
}

#bar:hover #foo {
    color: green;
}

http://jsfiddle.net/Uyypc/

- AlienWebguy

---

不确定为什么这个回答被踩了...我甚至在我的问题中提出了这种可能性。 - jayhendren

Answer 3

“父级”选择器

目前在CSS中没有一种方法可以选择一个元素的父级。

如果有这样的方法，那么它将会在CSS选择器规范中被列出，无论是CSS 2还是3

CSS 3选择器规范 & CSS 2选择器规范

与此同时，如果你需要选择一个父级元素，你将不得不使用JavaScript。

---

CSS选择器4规范提供了一种语法，通过使用!符号来定义选择器的“主题”。截至2012年，这在任何浏览器中都不可用。

使用CSS4选择器，可以使用以下代码解决原始问题：

li! > a.active { /* styles to apply to the li tag */ }

---

MooTools支持CSS Level 4选择器已经有几年了 - 具有讽刺意味的是，MooTools中的Slick选择器引擎实际上能够在规范草案发布之前处理这些选择器 --> 如何为选择器指定不同的主题？

- Sahil Popli

---

是的，我一直在研究那些W3C规范表以尝试找到解决方法。最初我希望 bar:hover :root foo 可以满足我的需求，但不幸的是，这并不起作用。 - jayhendren