【CSS】hover激活其他的class

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

原文地址：https://blog.csdn.net/mammonmon/article/details/52212246