添加到伪元素的转换（SASS）

Question

我试图在悬停时逐渐改变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');
}

Answer 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');
    }