Question

我正在为页面中多次使用的选项卡列表编写样式表，其中包含未选定选项卡的样式，悬停的选项卡以及选中的选项卡。问题是当将鼠标悬停在所选项目上时，悬停样式优先于所选样式。这是我的样式表：

@mixin bg-rgba($r, $g, $b, $a) {
  background: rgb($r, $g, $b);
  background: rgba($r, $g, $b, $a);
}

@mixin tab-inactive {
  background: none;
  color: rgb(68, 7, 114);
}

@mixin tab-hover {
  @include bg-rgba(68, 7, 114, 0.875);
  color: white;
}

@mixin tab-selected {
  @include bg-rgba(57, 12, 145, 0.875);
  color: white;
}

.tabbar {
  float: left;
  width: 200px;
  @include bg-rgba(255, 255, 255, 0.625);

  &-item {
    display: block;
    width: 100%;
    @include tab-inactive;

    &:hover {
      @include tab-hover;
    }

    // including &.active:hover doesn't work
    // using :active also isn't feasible
    &.active {
      @include tab-selected;
    }
  }
}

当我不使用mixins并复制粘贴我使用它的每个tabbar项目的三种样式时，它可以工作，但我怎么能用mixins，扩展，或通过我不知道的其他方法做到这一点的？

Answer 1

我无法看到您的代码存在问题 - 它目前呈现为：

＆＃13;

.tabbar-item:hover {
  background: #440772;
  background: rgba(68, 7, 114, 0.875);
  color: white;
}

.tabbar-item.active {
  background: #390c91;
  background: rgba(57, 12, 145, 0.875);
  color: white;
}

＆＃13;

只要悬停规则高于活动规则，就应该应用活动规则。

优先级为：悬停和类

1 个答案: