CSS悬停一个div并影响其兄弟的子代

嗨，我的问题是关于css3的，所以这里是我的问题的示例代码，在我想要的是将鼠标悬停在同级ID，并对子ID进行更改，谢谢CSS悬停一个div并影响其兄弟的子代

我试着用+和〜迹象，但仍然没有使用

希望你能帮助我在这个节目，非常感谢

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

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

，我想的是，当我将鼠标悬停兄弟ID背景孩子id的颜色将会改变。

来源

2013-10-04 I am L

请包括您已经尝试代码/ CSS。 –

也可以称为“侄子”元素 – Conqueror

下面是一个工作示例，您可能一直有问题，因为您的#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; 
}

注意，next sibling selector + isn't supported在< = IE6。

此外，我假设这只是一个例子，或者你只打算在页面上使用其中的一个，因为ID需要是唯一的。如果将要有多组这些元素，则使用类来代替。 Here is an example using classes.

来源

2013-10-04 19:37:47

+1：好东西。 –

像this

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

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

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

来源

2013-10-04 19:38:40 chopper

无较早的答案解决一般问题，他们都使用id选择哥哥的孩子。这将选择在GENRAL设置无论什么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/

来源

2013-10-04 19:47:03

CSS悬停一个div并影响其兄弟的子代

回答

相关问题