css修改svg

最新推荐文章于 2024-08-26 08:00:00 发布

我有一粒花生米

最新推荐文章于 2024-08-26 08:00:00 发布

阅读量1.3k

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_44286765/article/details/124402177

版权

本文探讨了如何使用 CSS 和 JavaScript 实现响应式的导航菜单，当某项菜单项被选中时，其图标颜色变化并伴随阴影效果。通过学习如何设置 `.is-active` 类的样式和 `filter` 属性，开发者可以提升用户体验。

摘要由CSDN通过智能技术生成

  .el-submenu.is-active .el-submenu__title .svg-icon {
        fill: currentColor;
        @include menuActiveText($menuActiveText);   
    }

    .el-menu-item.is-active .svg-icon {
      filter: drop-shadow($menuActiveText 100px 0);
      transform: translateX(-100px);  
  }