css多颜色的不同展示

在这里插入图片描述
若要实现每一行的展示不同的颜色,鼠标移动进去也要不同的颜色。

      <div class="icon-background" **:class="'level' + (index + 1)"** @click="onIconClick(item,index)">
      <style lang="scss" scoped>
$background-color: #f59d18, #00b7ee, #32b16c;
$hover-background-color: #ff7e00, #0097ee, #00984f;
   @for $i from 1 through 3 {
          .level#{$i} {
            background-color: nth($background-color, $i);
            cursor: pointer;
            &:hover {
              background-color: nth($hover-background-color, $i);
            }
              @if $i==3 {
      cursor: auto;
    }
          }
          </style>

通过sass的变量,来动态定义颜色的改变的。

发布了26 篇原创文章 · 获赞 7 · 访问量 1126
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览