Question

在this example version of my code中，如果您将鼠标悬停在其中一个非褪色的脸上，则在过渡期间会在其上方显示一些文字，然后消失。如果你在其中一个褪色面孔上做同样的事情，那么文字会在过渡期间出现在它上面，然后似乎跳到一切。

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

Answer 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边距。

如果您不希望覆盖层覆盖切片，请删除指示的行。

CSS过渡消失，然后消失

1 个答案: