hover内部指定子类的样式

最新推荐文章于 2025-01-09 21:59:19 发布

原创最新推荐文章于 2025-01-09 21:59:19 发布 · 508 阅读

0 ·

CC 4.0 BY-SA版权

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

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