0

我“需要”在 :hover 上定位两个元素中的每一个的另一个兄弟姐妹（实际上是兄弟姐妹的孩子）。我可以让下面的代码块工作，但我不能让它反过来工作。我知道没有指定的定位方法是这样的：“.element2:hover + .element1”，但我确实发现了这个（是否有“前一个兄弟”CSS选择器？）它有一些创造性的解决方案，包括 RTL 和一些棘手的：第n个孩子的想法。但是，我仍然看不到双向的方法，而只是切换方向（我需要两者）。

标记：

<div class="element1">Element 1</div>
<div class="element2">
    <p class="child">
        <span class="grandchild">Element 2</span>
    </p>
    <p class="child2"></p>
</div>
<div class="element3">Element 3</div>

CSS：

.element1:hover + .element2 .child .grandchild { background-color: red; }

https://jsfiddle.net/macwise/6u3nj18m/

编辑：我添加了第三个根子元素 (.element3) 以反映我正在使用的真实案例。

更新：也许我的“前一个兄弟姐妹”的语言含糊不清，因此被误解为“父级”（是否有 CSS 父级选择器？）。父母定位也可能提供令人满意的解决方案，但我在技术上需要定位“在同一父母的另一个兄弟姐妹之前的父母的一个兄弟姐妹”。它比听起来简单。：） 希望这能说明问题。

4

1 回答 1

0

你可以从父母那里抓住悬停并在你悬停一个孩子时触发它。

然后将 bg 应用于所有 div，但一个悬停：

body div {
    pointer-events: auto;
}
body {
    pointer-events: none;
}
body:hover div {
    background: red;
}
body:hover div:hover {
    background: none;
}
<div class="element1">Element 1</div>
<div class="element2">
  <p class="child">
    <span class="grandchild">Element 2</span>
  </p>
  <p class="child2"></p>
</div>

但是，这只是为了好玩，您应该为此使用 JavaScript。

于 2016-02-07T01:25:51.510 回答