Question

我想将过渡添加到悬停之后的元素上，问题是那不起作用。我想将鼠标悬停在图像上并在其上添加背景色，然后在.5s上应用过渡。内容仅用于测试。

.imageGallery1 {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  position: relative;

  &:hover {
    &::after {
      content: '>';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: $main-color;
      opacity: 0.3;
      transition: 0.5s;
    }
  }
}

Answer 1

假设.imageGallery1的容器具有尺寸（ width，height ），因此它可以在https://codepen.io/anon/pen/MZNjeZ上正常工作到100%。

Answer 2

我做了这样的事情，它起作用了！

& a {
    position: relative;
    display: inline-block;
    height: 100%;
    z-index: 1090;
    &::after {
      content: '>';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: $main-color;
      opacity: 0;
      transition: 0.5s opacity;
      cursor: pointer;
    }
    &:hover::after {
      opacity: 0.3;
    }
  }

SCSS-将过渡添加到after元素

2 个答案: