im trying to make a container, u have the code below, in which it have 4 divs, one doesnt change and the other three change the widht depend where u pass the mouse.
In the first div, c52, works fine but the others two doesnt affect the precious divs. I try to use ~ and + but nothing change.
Do you know what problem I have in my code?
Thanks.
#triangulo{
float: right;
width: 0;
height: 0;
border-style: solid;
border-width: 0 2vw 1vw 2vw;
border-color: transparent transparent #F5BC00 transparent;
}
#triespacio{
height:1vw;
width:85vw;
float:right;
}
#contenedor5{
float: left;
width: 90vw;
height: 95vh;
color: #FDFDFD;
background: whitesmoke;
}
#yo{
float: left;
width: 10vw;
}
#yop{
border-radius: 50%;
padding: 5vmin;
}
#c51{
margin-top: 2vmin;
float: left;
width: 24vw;
height: 90vh;
background: rgb(60, 80, 130);
}
#c52{
margin: 2vmin;
float: left;
width: 20vw;
height: 90vh;
background: #f6c164;
transition: width 1s ease-in-out, left 1.5s ease-in-out;
}
#c52:hover{
width: 40vw;
}
#c52:hover ~ #c53 {
width: 10vw;
}
#c52:hover ~ #c54 {
width: 10vw;
}
#c53{
margin: 2vmin;
float: left;
width: 20vw;
height: 90vh;
background: #b5d8ad;
transition: width 1s ease-in-out, left 1.5s ease-in-out;
}
#c53:hover{
width: 40vw;
}
#c53:hover ~ #c52 {
width: 10vw;
}
#c53:hover ~ #c54 {
width: 10vw;
}
#c54{
margin: 2vmin;
float: left;
width: 20vw;
height: 90vh;
background: #bcd6de;
transition: width 1s ease-in-out, left 1.5s ease-in-out;
}
#c54:hover{
width: 40vw;
}
#c54:hover ~ #c52 {
width: 10vw;
}
#c54:hover ~ #c53 {
width: 10vw;
}<div id="contenedor5">
<a href="main.html"><div id="triangulo"></div></a>
<div id="triespacio"></div>
<div id="c51">
<div id="yo">
<img id="yop" src="yo.jpg" alt="foto" style="width:100%">
</div>
</div>
<div id="c52">
soy c52
</div>
<div id="c53">
soy c53
</div>
<div id="c54">
soy c54
</div>
</div>