CSS对象元素2 on：悬停和元素1 on：悬停

我“需要”将其他的两个元素（实际上是兄弟姐妹的孩子）中的每一个的兄弟对象放在：hover上。我可以让下面的代码块工作，但我无法让它在相反的工作。我知道没有像这样定位的指定方法：“.element2：hover + .element1”，但是我确实发现了这个（Is there a "previous sibling" CSS selector?），它有一些创造性的解决方案，包括RTL和一些棘手的：第十二子想法。然而，我仍然无法看到两种方式，但只是切换方向（我需要两种方式）。CSS对象元素2 on：悬停和元素1 on：悬停

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），以反映真实世界的情况下，我与...合作。

更新：也许我的“以前的兄弟姐妹”的语言含糊不清，因此被误解为“父母”（Is there a CSS parent selector?）。父母定位可能也会提供令人满意的解决方案，但我在技术上需要针对“在同一父母的另一个兄弟姐妹之前出现的父母的一个兄弟姐妹”。它比听起来更简单。：）希望这能说明问题。

来源

2016-02-07 macwise

Thanks Trix！我更新澄清说，虽然这种情况可以提供解决方案，但这不是同一个问题。 – macwise

该线程讨论了其中一种情况。我正在寻找“蛋糕和吃它”的场景，或者两全其美。正如我在文章中所解释的那样，该线程只想颠倒顺序，所以'.element2'触发'.element1'。我需要和'.element1'来触发'.element2'，并且我需要它为每个元素触发不同的样式。希望这是有道理的。 – macwise

你可以捕捉从父母悬停并触发它，一旦你悬停一个孩子。

然后应用到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-07 01:25:51

感谢您的回答。嗯...我有第三个元素（更新帖子反映），但也许你的答案结合一个：not（）伪元素总是排除第三个非相关的孩子可能会工作？ – macwise

我到目前为止：https://jsfiddle.net/macwise/5vc698fw/2/ 但我需要对每个孩子（字体颜色在一个，在另一个背景） – macwise

Bah有不同的声明。唉，元素三也包含链接。 :(我很快学习如何不问一个好的SO问题。 – macwise

CSS对象元素2 on：悬停和元素1 on：悬停

回答

相关问题