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並影響其兄弟的子代

回答

相關問題