CSS：使用元素选择不相关的元素：悬停伪类

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

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/

Answer 3

“父”选择器

目前无法在 CSS 中选择元素的父级。

如果有办法做到这一点，那就是 CSS 选择器规范，CSS 2 或 3

CSS 3 Selectors Spec & CSS 2 Selectors Spec

与此同时，如果您需要选择父元素，则必须使用 JavaScript。

---

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

使用 CSS4 选择器，原来的问题可以这样解决：

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

---

MooTools 已经支持 CSS 4 级选择器已有几年了 - 具有讽刺意味的是，MooTools 中的 Slick 选择器引擎实际上能够在规范草案发布之前处理这些选择器 -->How do I specify a different subject for the selector?