我对图像有悬停效果。如果您将鼠标悬停在它上面并用鼠标停留在那里,转换将在给定的持续时间内执行。
当你离开现场时,我也做了正确的转换。
现在,我希望悬停过渡以给定的持续时间开始,无论您是否只是将鼠标悬停在图像上 1 毫秒。
这只能用 javascript 实现吗?
.example { position: absolute;
left: 0;
height:320px;
bottom: 0;
width: 100%;
background: #000;
background-color: rgba(255, 255, 255, 0.4);
opacity:0;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
-ms-transition: background-color 2s ease-out;
transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
text-align: center;
line-height: 299px;
text-decoration: none;
color: #000000;
font-size:30pt;
}
.image:hover .example { background-color: rgba(255, 255, 255, 0.4);
-webkit-transition: background-color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out;
-ms-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
opacity:1;
}
有了这个,如果我将鼠标悬停在图像上,我的文本和背景颜色就会动画化,当我离开图像时,文本和背景颜色就会动画化。它工作正常。 (虽然,我上面的代码现在有点未排序)
所以,我想要的只是淡入和淡出动画将完全执行,即使我只是快速悬停在图像上并返回。
我觉得不可能吧? (我的意思是只有 CSS)
最佳答案
恐怕您将不得不使用一些 Javascript,因为据我所知,没有 javascript 是不可能做到的。
在悬停时添加一个类,并在动画结束时将其删除。请参阅此答案以了解如何执行此操作 - css3 animation on :hover; force entire animation
PS:我本来想说这是一条评论,但我现在没有权限。
关于html - 具有快速鼠标悬停/鼠标移出的完整悬停动画持续时间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31270474/