css - 添加过渡到伪元素 (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');
    }