【问题标题】: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');
    }

【讨论】:

    猜你喜欢
    • 2016-02-22
    • 2013-12-27
    • 2017-04-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-09-26
    • 2017-01-22
    • 2021-04-26
    相关资源
    最近更新 更多