我想对子元素进行:hover更改。

假设我有以下HTML:

<div class="wrap">
    <div class="adjacent_sibling">Placeholder text</div>
    <div class="adjacent_sibling class">Placeholder text</div>
</div>


我可以使用CSS对子元素进行更改,如下所示:

.wrap:hover .class {
/*CSS to come here*/
}


但我不能像这样进行更改:

.wrap:hover + .wrap > .adjacent-sibling{
/*CSS to come here*/
}


要么:

.wrap:hover + .adjacent-sibling {
/*CSS to come here*/
}


如何做到这一点?
如果是孩子(孩子),则需要定位相邻的兄弟姐妹。这仅用于学习目的。

最佳答案

+引用邻居元素而不是子元素。

如果您希望它是这样的:

.wrap:hover > .adjacent-sibling,
.wrap > .adjacent-sibling {
/*CSS to come here*/
}




要么:

.wrap:hover > .adjacent-sibling {
/*CSS to come here*/
}




编辑:如何针对孩子中的相邻兄弟姐妹:

.wrap:hover > .adjacent-sibling + .adjacent-sibling.class {
/*CSS to come here*/
}

09-18 23:03