添加过渡到伪元素（SASS）

【问题标题】：Adding transition to pseudo element (SASS)添加过渡到伪元素（SASS）
【发布时间】：2017-07-05 11:48:25
【问题描述】：

我正在尝试在悬停时而不是立即更改 div 的背景，但是我无法将过渡应用到我的伪元素。这是我尝试过的 -

@mixin project-styling($url) {
  background: url($url);
  background-size: cover;
  overflow: hidden;
  transition: all 2s;

  &:hover:after {
    background-color: rgba(0, 0, 0, 0.7);
    content: '';
    width: 400px;
    height: 300px;
  }
}

div {
  @include project-styling('image.png');
}

【问题讨论】：

您需要提供工作代码sn-p

标签： css sass css-transitions

【解决方案1】：

过渡也需要在伪元素上。当 div 没有悬停时，您也没有包含伪元素。

    @mixin project-styling($url) {
      background: url($url);
      background-size: cover;
      overflow: hidden;
      transition: all 2s;

      &::after {
         background-color: rgba(0, 0, 0, 0.7);
         content: '';
         width: 400px;
         height: 300px;
         transition: all 2s;
      }

      &:hover::after {
        background-color: rgba(0, 0, 0, 1);
      }
    }

    div {
      @include project-styling('image.png');
    }

【讨论】：