Less :hover 不覆盖 :before color

Question

我有一个带有 :before 伪 class 的 link。

我正在尝试使用 LESS 设置样式，使内容为灰色，但悬停时为红色。但是，我找不到默认颜色和悬停颜色都起作用的任何代码组合。

更少的代码：

.icon-support:before {
  content: "acvzssd";
}

.help {
  .icon-support {
    &:before {
      color: grey;
    }
    &:hover,
    &:focus,
    &:active {
      color: red !important;
    }
  }
}

HTML:

<a class="help" href="#">
  <span class="icon-support"></span>
</a>

Answer 1

我知道的不多，但这很有效:D

.icon-support:before {
  content: "acvzssd";
}

.help {
  .icon-support {
    &:before {
      color: grey;
    }
    &:hover,
    &:focus,
    &:active {
      &:before {
        color: red;
      }
    }
  }
}

Answer 2

为了让它工作，你只需要在 ::before 伪元素而不是元素本身上指定样式，所以你最终的 LESS 代码将如下所示：

.icon-support::before {
  content: "acvzssd";
}

.help {
  .icon-support {
    &::before {
      color: grey;
    }
    &:hover::before, /*   <-- Change to "before" here */
    &:focus::before, /*   <-- and here */
    &:active::before { /* <-- and here */
      color: red;
    }
  }
}

修复代码笔：http://codepen.io/maxlaumeister/pen/xwgzJQ

这里是 现场演示 使用编译的 CSS:

.icon-support::before {
  content: "acvzssd";
}
.help .icon-support::before {
  color: grey;
}
.help .icon-support:hover::before,
.help .icon-support:focus::before,
.help .icon-support:active::before {
  color: red;
}

<a class="help" href="#">
  <span class="icon-support"></span>
</a>

Less :hover 不覆盖 :before color

Less :hover not overwriting :before color

html

hover

less