javascript - 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 需要是唯一的。如果将有多组这些元素，则使用类代替。这是一个使用类的示例。

Answer 2

较早的答案一般都没有解决问题，它们都使用id来选择兄弟的孩子。无论 id 是什么，这都会在一般设置中选择

$(document).ready(function(){
    $("#sibling").hover(function(){
        $(this).siblings("div").children("div").css("background", "red");
    }, function(){
        $(this).siblings("div").children("div").css("background", "#e7e7e7");
    });
});

http://jsfiddle.net/SjgYM/

Answer 3

像这样

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

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

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