Question

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

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

希望你能帮我解决这个问题，非常感谢

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

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

和我想要的是，当我悬停兄弟id时，子id的背景颜色将会改变。

Answer 1

以下是一个有效的示例，您可能遇到了问题，因为您的#child标记未关闭，或者您的CSS稍微偏离了。

Demo

<强> 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;
}

请注意＆lt; = IE6中的next sibling selector + isn't supported。

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

Answer 2

赞this

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

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

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

Answer 3

以前的答案都没有解决问题，他们都使用id来选择兄弟的孩子。无论ids是什么

，这都会选择一般设置

$(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/

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

3 个答案: