伪元素上的CSS转换不会在第二次＆＃34;第二次＆＃34;

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属性。因此，当你没有悬停在它上面时，它没有大小（它会立即消失）。

不被徘徊时的样子：

它应该是什么样的：

要修复此问题，只需将所有尺寸/布局属性从.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);
}

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

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;