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：懸停

回答

相關問題