CODEWITHSUNDEEP
htmlcsshoversiblings
Fyxerz
Fyxerz

Reputation: 169

General sibling selector not applying on hover

Im trying to make a div disappear when hovering another one. Im trying to modify the width of the second div to 0 to make it disappear. However, the effect is not applying forit. Im using the general sibling selector (~)

<div id="bands">
<div id="left_band">
</div>
<div id="right_band">
</div>


#bands{
width: 960px;
height: 1000px;
background-color:  #002A66;
padding-top: 20px;

}

#left_band {
        -webkit-transition: 0.5s ease;
    transition: 0.5s ease;
width: 100px;
height: 100px;
float: left;
background-color: red;

}

#left_band:hover{
width: 900px;
height: 500px;

}

#right_band{
    -webkit-transition: 0.5s ease;
    transition: 0.5s ease;
width: 100px;
height: 100px;
float: right;
background-color: red;

}

#right_band:hover ~ #left_band{
    -webkit-transition: 0.5s ease;
    transition: 0.5s ease;
display: none;

}

Upvotes: 0

Views: 68

Answers (1)

ProfHase85
ProfHase85

Reputation: 12193

According to this one:

http://reference.sitepoint.com/css/generalsiblingselector

you will need to interchange the order in your declaration:

#left_band~#right_band:hover{
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
display: none;
}

since left band comes first in your dom

Upvotes: 1

Related Questions