hover内部指定子类的样式

高桥靓仔

于 2021-01-29 17:02:10 发布

阅读量495

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_45221036/article/details/113397847

这篇博客探讨了如何使用CSS的:hover伪类选择器，结合内部选择器，实现在鼠标悬停在外部容器上时，改变其子元素如圆圈图标和数字的背景颜色和文字颜色。通过示例代码展示了具体的实现方式，包括过渡效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

hover内部指定子类的样式

如下图：想要实现的是鼠标hover在外部容器上，其子元素变化不同的样式。

在这里插入图片描述

上代码：（css的hover内部还可以进行写选择器来写对应的子元素样式）

.ant-steps-item-container {// 外部容器
  &:hover {
    .ant-steps-item-icon {// 整个圆圈⭕️
      background-color: #1890ff;
      transition: all 0.3s;
      .ant-steps-icon {// 数字2、3 
        color: #fff !important;
        transition: all 0.3s;
      }
    }
  }
}