我想对子元素进行: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*/
}