CODEWITHSUNDEEP
javascriptjqueryhtmlcss
I am L
I am L

Reputation: 4662

CSS hover a div and affect the child of of its brother

hi my problem is about css3 so here's a sample code of my problem where in what i want is to hover the sibling id and make changes on the child id, thanks

i tried using + and ~ sign but still no use

hope you can help me on this program, thanks a lot

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

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

and what i want is , when i hover sibling id the background-color of child id will be change.

Upvotes: 0

Views: 3594

Answers (3)

Daniel Imms
Daniel Imms

Reputation: 50259

Here is a working example, you may have been having issues because your #child tag wasn't closed or maybe your CSS was a little off.

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

Note that the next sibling selector + isn't supported in <= IE6.

Also, I assume that this is just an example or you only plan to have one of these on a page since IDs need to be unique. If there are going to be multiple sets of these elements then use classes instead. Here is an example using classes.

Upvotes: 6

Sam Battat
Sam Battat

Reputation: 5745

None of the earlier answers solve the problem in general, they all use the id to select the brother's child. This selects in genral setup no matter what the ids are

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

Upvotes: 0

chopper
chopper

Reputation: 6709

Like this

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

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

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

Upvotes: 0

Related Questions