This question already has an answer here:
- Is there a “previous sibling” CSS selector? 11 answers
What I want to do is make box2 go to 50% and box1 to go to 16.666% when I hover over Box2. Its working on box1 but not box2.
After the mouse is off the div I want it to go back to normal.
Any help would be greatly appreciated. Thanks!
.W25 {
height: 500px;
width: 25%;
margin: 0px;
padding: 0px;
}
.W16 {
height: 500px;
width: 16.666%;
margin: 0px;
padding: 0px;
}
#bigbox {
margin: 0px;
padding: 0px;
height: 650px;
width: 100%;
position: absolute;
}
#box1 {
background-color: #0C3;
-webkit-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-ms-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
float: left;
}
#box2:hover {
width:50%;
margin: 0px;
padding: 0px;
}
#box2:hover ~ #box1 {
width:16.666%;
margin: 0px;
padding: 0px;
}
#box1:hover {
width: 50%;
margin: 0px;
padding: 0px;
}
#box1:hover ~ #box2 {
width: 16.66666%;
margin: 0px;
padding: 0px;
}
#box2 {
background-color: #F96;
-webkit-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-ms-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
float: left;
height:600px;
}
<body>
<div id="bigbox">
<div class="W25" id="box1"></div>
<div class="W25" id="box2"></div>
</div>
</body>
Aucun commentaire:
Enregistrer un commentaire