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%;
}
评论区