Question

我需要＆＃34;定位两个元素（实际上是兄弟姐妹的孩子）的其他兄弟：hover。我可以让下面的代码块工作，但我不能让它反过来工作。我知道没有指定的定位方法，如下所示：＆＃34; .element2：hover + .element1＆＃34;，但我确实发现这个（Is there a "previous sibling" CSS selector?）有一些创意解决方案，包括RTL和一些棘手的问题： n-child的想法。但是，我仍然无法找到一种方法，而只是转换方向（我需要两者）。

MARKUP：

<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）来反映我正在使用的真实案例。

更新：也许是我的语言＆＃34;以前的兄弟姐妹＆＃34;是模糊的，因此误解为＆＃34;父母＆＃34; （Is there a CSS parent selector?）。家长定位也可能提供一个令人满意的解决方案，但我在技术上需要针对父母的一个兄弟，这个兄弟来自同一父母的另一个兄弟。＆＃34;它比听起来更简单。 :)希望能够解决问题。

Answer 1

你可以抓住父母盘旋并在你盘旋孩子时触发它。

然后将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。

CSS目标元素2在1：悬停，元素1在2：悬停

1 个答案: