CSS 过渡淡出，然后消失

【问题标题】：CSS transition fades, then disappearsCSS 过渡淡出，然后消失
【发布时间】：2014-11-04 12:53:44
【问题描述】：

在this example version of my code 中，如果您将鼠标悬停在其中一个未褪色的面上，则在过渡期间会出现一些文本，然后消失。如果您对其中一个 faded 面执行相同操作，则文本会在过渡期间出现在其上，然后似乎跳到所有内容的后面。

https://www.youtube.com/watch?v=Dx2d2G9pXb8

我已尝试更改所有相关元素的 z-index，但似乎没有效果。如何让它从不可见淡化为可见，然后一直呆在那里？

这是重要 scss 的精简版

.value-tweet-container {
    z-index: 2000;
    -webkit-transition: opacity 0.5s ease-in;
       -moz-transition: opacity 0.5s ease-in;
        -ms-transition: opacity 0.5s ease-in;
         -o-transition: opacity 0.5s ease-in;
            transition: opacity 0.5s ease-in;
    opacity: 0;
    &:hover{
        opacity: 1;
    }
}

【问题讨论】：

标签： html css

【解决方案1】：

要保留叠加层，请添加 position: absolute 和 top: 0 / left: 0。

像这样：

.value-tweet-container {
  position: absolute;
  box-sizing: border-box; /* Remove if you don't want to cover the entire tile */
  top: 0;
  left: 0;
  height: 100%; /* Remove if you don't want to cover the entire tile */
  width: 100%; /* Remove if you don't want to cover the entire tile */
}

Here is your new pen.

border-box 有助于将填充添加到高度和宽度百分比计算中，并且我删除了 3px 边距。

如果您不希望图块被叠加层覆盖，请删除指示的线条。

【讨论】：