CSS 过渡在悬停时不起作用

Answer 1

这是因为你无法从

display: none

过渡到

display: table

。

相反，您可以通过将初始显示设置为

opacity

以及

table

然后转换为

opacity: 0

来转换

opacity: 1

属性：

更新示例

.overlay {
  display: table;
  background: rgba(2, 2, 2, 0.61);
  color: #FFF;
  text-align: center;
  -moz-transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  opacity: 0;
  height: 100%;
  width: 100%;
}
.collection-category:hover>a>.overlay_wrap>.overlay {
  opacity: 1;
}

Answer 2

只是路过，因为我正在寻找相同的解决方案。 我不知道你是否还在乔什身边，但非常感谢！ Chat GPT 没有注意到我将显示设置为表格。我所有减缓过渡的尝试都是徒劳的。我不知道该表不会受到转换的影响。