html - 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 更像是 A 的远亲？

我在想几个解决方案。一:使用Javascript。这听起来对我来说不太吸引人，因为我希望在没有 JS 的情况下让我的页面完全正常运行，以防有人在浏览我的页面时在他们的浏览器中禁用了 JS。我也希望保持简单。第二种解决方案:将foo div 放在bar div 中，然后使用position: absolute 将foo 移动到哪里我希望它结束​​。这是一个困惑的解决方案，原因应该是显而易见的。

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'));
  }
);