CSS徘徊div并影响其兄弟的孩子

Question

您好我的问题是关于css3所以这里是我的问题的示例代码在哪里我想要的是悬停兄弟ID并对子ID进行更改,谢谢

我尝试使用+和〜符号但仍然没用

希望你能帮助我这个项目,非常感谢

<div id="sibling"></div>

<div id="brother">
    <div id="child">
</div>

而我想要的是,当我悬停兄弟姐妹id时,孩子id的背景颜色将会改变.

Answer 1

这是一个工作示例,您可能遇到了问题,因为您的#child标签未关闭或者您的CSS有点偏差.

演示

HTML

<div id="sibling">Sibling</div>

<div id="brother">
    <span>Brother</span>
    <div id="child">Child</div>
</div>

CSS

#sibling:hover + #brother #child {
    background-color:red;
}

请注意,<= IE6中不支持下一个兄弟选择+器.

此外,我假设这只是一个示例,或者您只计划在页面上使用其中一个,因为ID必须是唯一的.如果将有多组这些元素,则使用类来代替.这是一个使用类的示例.