SCSS - 添加过渡到元素之后

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 - 添加过渡到元素之后

SCSS - add transition to after element

css

sass

css-transitions