hover一个组件，另一个组件css效果

两个组件是父子关系时：如下：

.login .move{
position: absolute;
left: 10%;
top: 45px;
width: 0;
border-top: 2px solid #E53C3C;
transition: width 0.4s ease-in-out;
}

.login:hover .move{
width: 50px;
}


两个组件不是父子关系时：用~.即可，如下：

.nav .move{
position: absolute;
border-top: 4px solid #E53C3C;
left: 0;
top: 55px;
transition: left 0.4s ease-in-out;
}
.nav ul li:nth-child(1):hover~.move{
left:0;
}
.nav ul li:nth-child(2):hover~.move{
left:20%;
}
.nav ul li:nth-child(3):hover~.move{
left:40%;
}
.nav ul li:nth-child(4):hover~.move{
left:60%;
}
.nav ul li:nth-child(5):hover~.move{
left:80%;
}