CSS转换淡入,然后消失
问题描述:
如果将鼠标悬停在其中一个未淡化的面上,则在转换过程中出现一些文本,然后消失。如果你在褪色的表面上做同样的事情,那么在转换过程中出现在文本上方的文字,然后似乎跳到一切后面。CSS转换淡入,然后消失
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;
}
}
答
的削减版本,以获得覆盖住,加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 */
}
的border-box
帮助的,因为增加了填充到高度和宽度比率计算和我除去3PX余量。
如果你不要想让瓷砖被覆盖物覆盖,请删除指示的线条。