html - CSS Selector for Child of Parent's Sibling Element

Question

If I've got this:

<div class="parent">
    <a href="#" id="trigger">Trigger</a>
</div>
<div class="sibling">
    <div id="change">Hello</div>
</div>

Is there a selector to grab #change when #trigger is hovered upon?

Like upon hover of #trigger, change the background of .sibling's #change element.

I'm looking for a pure CSS solution without javascript.

score 25 · Accepted Answer

一句话：没有。

鉴于 HTML 的当前结构（以及 CSS 选择器的当前状态），这是不可能的。也许我们会在 CSS4 中得到类似的东西，但是这样的遍历最好留给 Javascript。

您显然可以重组您的标记，并使用兄弟选择器：

HTML

<div class="parent">
    <a href="#" id="trigger">Trigger</a>
    <div class="sibling">
       <div id="change">Hello</div>
    </div>
</div>

CSS

#trigger:hover + .sibling #change {
  color:red; 
}

score 2 · Accepted Answer

不，您不能仅使用 CSS 来实现这一点。在这种情况下，Javascript 是一个不错的选择。

但是，您可以检测到.parent悬停（如果父级恰好围绕触发器，这将解决您的问题）：

.parent:hover + .sibling div#change{background:red;}

（标记保持不变jsFiddle）

2 回答 2