父亲兄弟元素子的CSS选择器

Question

如果我有这个：

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

当#trigger徘徊时，是否有一个选择器来抓取#change？

在悬停#trigger时，更改.sibling的#change元素的背景。

我正在寻找一个没有javascript的纯CSS解决方案。

Answer 1

总之：不。

鉴于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; 
}

codepen

Answer 2

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

然而，你可以检测到.parent正在悬停（如果父母完全包围触发器，这将解决你的问题）：

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

（标记保持不变jsFiddle）