伪元素上的 CSS 过渡“第二次”不起作用答案

【问题标题】：CSS transition on a pseudo-element doesn't work the "second time"伪元素上的 CSS 过渡“第二次”不起作用
【发布时间】：2015-08-03 18:16:22
【问题描述】：

我在 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，它才起作用。

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

【问题讨论】：

以防万一::after 是伪元素而不是伪类/状态，所以它应该与双冒号一起使用。
@c-smile 哦，我忘了。不过，这并不能解决任何问题。

标签： html css css-transitions pseudo-element

【解决方案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);
}

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

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

&lt;div class="innerImg"&gt;Hover over me!&lt;/div&gt;

【讨论】：