两个组件是父子关系时：如下：
.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%;
}
转载请注明原文地址: https://ju.6miu.com/read-1303398.html
