子どもセレクタから兄弟親divにはcssを使用してホバー効果

Question

私には2つの兄弟div（親div）があり、それらには子divがあります。 parent1内のchild2 divにマウスを置くと、parent2 div内のchild4 divのスタイルを変更したかったのです。スタイル、すなわち背景、何かのような色。私はこの要件にマウスオーバー効果が必要です。私はjssを使わずに、cssだけ必要です。

以下の構造を与えました。 child2はchild1の内側にあり、child1はparent1の内側にあります。 child4はchild3の内部にあり、child3はparent2の内部にあります。 親1と親2は兄弟です。

parent1 > child1 > child2 
parent2 > child3 > child4 

Answer 1

あなたの純粋なCSSでcan't go back in the DOM要素をホバリングするとき、兄弟のチャイルズ、兄弟とチャイルズを選択することしかできない理由、それはです。以下は、現在、最初の親を置くことによって選択することができるかを示しています。

#parent1:hover > div { 
 
    color: blue; 
 
} 
 
#parent1:hover > div > div { 
 
    color: purple; 
 
} 
 
#parent1:hover ~ div { 
 
    color: red; 
 
} 
 
#parent1:hover ~ div > div { 
 
    color: orange; 
 
} 
 
#parent1:hover ~ div > div > div { 
 
    color: green; 
 
} 
 

 
#parent1 { 
 
    border: 1px solid blue; 
 
} 
 
div { 
 
    margin: 5px 0; 
 
} 
 
div > div { 
 
    margin-left: 15px; 
 
}

<div id="parent1"> 
 
    Parent1 (target) 
 
    <div>Child1 
 
    <div>Child2</div> 
 
    </div> 
 
</div> 
 

 
<div> 
 
    Parent2 
 
    <div>Child1 
 
    <div>Child2</div> 
 
    </div> 
 
</div>