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%;
}