css

【CSS】hover激活其他的class

Chason
2021-01-22 / 0 评论 / 0 点赞 / 1,081 阅读 / 818 字
温馨提示:
本文最后更新于 2021-03-01,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

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

0

评论区