从兄弟父母divs使用css悬停效果的儿童选择器

我有两个兄弟divs（父div）和那些有子div。如果我将鼠标悬停在parent1的child2 div上，我想更改parent2 div内的child4 div的样式。风格即背景，颜色像任何东西。我需要鼠标悬停在这个要求上。我只需要与CSS，没有jQuery。从兄弟父母divs使用css悬停效果的儿童选择器

我给出了下面的结构。 child2在child1内，child1在parent1内。 child4在child3内，child3在parent2内。父母1和父母2那些是兄弟姐妹。

parent1 > child1 > child2 
parent2 > child3 > child4

来源

2017-03-07 user2132040

能否请您分享一些代码？ – caisah

你不能单独使用CSS。你需要使用JavaScript。你可以用CSS做的唯一事情是，如果你将鼠标悬停在parent1上，你可以在parent2中改变child4的风格。 –

您can't go back in the DOM纯CSS，这就是为什么它是唯一可以选择孩子的，兄弟姐妹和兄弟姐妹的孩子的盘旋的元素时。下面演示了什么目前可以将鼠标悬停在第一个父选择：

#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>

来源

2017-03-07 18:07:37 Marvin

从兄弟父母divs使用css悬停效果的儿童选择器

回答

相关问题