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的选择器来选择元素B的{{1}}后代。使用新的CSS3规范，可以使用一些新的伪类来选择A的兄弟元素。

但是有没有办法选择一个（或多个）元素A更像是B的远亲？

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

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＆amp; 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选择器引擎实际上能够在规范草案发布之前处理这些选择器 - ＆gt; How do I specify a different subject for the selector? < / p>

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

3 个答案:

“父母”选择者