3

我的网页上有一个按钮。当光标悬停在按钮上时，我想使用 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来选择Belement 的后代A。使用新的 CSS3 规范，可以选择A使用一些新伪类的兄弟元素。

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

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

4

3 回答 3

2

是的，但不是 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'));
  }
);
于 2013-03-07T04:14:07.397 回答
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/

于 2013-03-07T04:19:42.667 回答
1

“父”选择器

目前没有办法在 CSS 中选择元素的父级。

如果有办法做到这一点，它将在 CSS 选择器规范中，CSS 2 或 3

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

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

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

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

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

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

于 2013-03-07T04:20:57.133 回答