根据祖父母类更改伪元素样式

Question

请考虑以下scss：

.link {
  ....

  span {
    .... 

    &:after {
      ....

      .link.active & {
        background-color: red;
      }

      .link:hover & {
        background-color: red;
      }

当span被悬停或具有:after类时，我想更改link .active伪元素的背景颜色。

我尝试过的（上面发布的代码）似乎不起作用。

我有什么想念的吗？

Answer 1

您应该尝试使用这种方案：

.link {
  span {
    &:after {
     ...
    }
  }
  &.active,
  &:hover {
    span:after {
      background-color: red;
    }
  }
}

工作示例：http://jsfiddle.net/92gqap5y/

Answer 2

这个问题似乎经常被问为mentioned in this thread。

它们将link元素的大小增加到与span一样大。尽管我建议将:hover选择器和.active类直接移动到span元素。