CSS 伪元素上的过渡不起作用 "second time"

Question

我在 CSS 中使用一个简单的 :hover:after 在 div 上创建一个深色叠加层。我还使用 transition 属性使其淡入和淡出，而不是简单地出现和消失。

现在，淡入效果非常好，但另一方面，淡出则不然。它就这么消失了，就好像从来没有 transition 在一起一样。

这是简化的代码：
HTML:

<div class="innerImg"></div>

CSS（完整代码）：

.innerImg {
    float: left;
    height: 74%;
    background-image: url("../images/an_image.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100%;
    border-bottom: 1px solid #9F9F9F;
    transition: all .2s ease;
    overflow: hidden;
    position: relative;
}
.innerImg:hover {
    border-color: #F8CE26;
    transition: all .2s ease;
}
.innerImg:after {
    transition: all .2s ease;
    content: "";
}

.innerImg:hover:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,0.7);
  cursor: pointer;
  transition: all .2s ease;
}

无奈之下，我transition处处应用，但仍然没有任何变化。本来只要放在.innerImg和.innerImg:after里面就行了。事实上，直到我只创建 :after 并给出 transition.

，它才起作用

我在这里遗漏了什么愚蠢的东西吗？

Answer 1

发生这种情况是因为您将定义对象大小的所有 CSS 属性放置在悬停选择器上。所以当你没有将鼠标悬停在它上面时，它没有大小（并且它会立即消失）。

不悬停时的样子：

它应该是什么样子：

要修复，只需将所有 size/layout 属性从 .innerImg:hover:after 移动到 .innerImg:after。

.innerImg:after {
    display: block;
    transition: all .2s ease;
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
    cursor: pointer;
}
.innerImg:hover:after {
    background-color: rgba(0, 0, 0, 0.7);
}

演示（我放慢了动画速度以便更容易看清）：

.innerImg {
  float: left;
  height: 74%;
  background-image: url("../images/an_image.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
  border-bottom: 1px solid #9F9F9F;
  transition: all .5s ease;
  overflow: hidden;
  position: relative;
}
.innerImg:hover {
  border-color: #F8CE26;
  transition: all .5s ease;
}
.innerImg:after {
  display: block;
  transition: all .5s ease;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
  cursor: pointer;
}
.innerImg:hover:after {
  background-color: rgba(0, 0, 0, 0.7);
}

<div class="innerImg">Hover over me!</div>

CSS 伪元素上的过渡不起作用 "second time"

CSS transition on a pseudo-element doesn't work the "second time"

html

css

pseudo-element

css-transitions