Question

我有一个带有：之前伪类的链接。

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

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

修正了Codepen：http://codepen.io/maxlaumeister/pen/xwgzJQ

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

＆＃13;

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

＆＃13;

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

＆＃13;

减：悬停不覆盖：颜色之前

2 个答案: