悬停效果后如何保持悬停? [英] How to keep hover after hover effect?

问题描述

我有这种悬停效果 http://codepen.io/anon/pen/dMbEdq但问题是动画结束后，悬停消失了.我需要保持悬停.有什么建议吗?

I have this hover effect http://codepen.io/anon/pen/dMbEdq but problem is that after animation finishes, the hover disappear. I need that hover to stay. Any suggestion?

 <div class="hover15">
    <figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg" /></figure>
 </div>

推荐答案

使用以下代码:

transition-duration: 100s;

在您希望动画保持或停留一段时间的地方使用以下代码.如果您希望它循环播放@单击事件，请参考 KeyFrames .

Use the following code where ever you want animation to hold or stay for sometime. And if you want it to loop or play @ click events kindly refer to KeyFrames.

像这样使用:

@keyframes hover {
 0% {
   // normal styles
 }
 100% {
   // hover styles
 }
}

.class {
 animation-name: hover;
 animation-duration: 1ms;
 animation-fill-mode: backwards;
 animation-play-state: paused;      
 }

.class:active,
.class:focus,
.class:hover {
   //hover style you define
 }

参考单击此处查看效果

这篇关于悬停效果后如何保持悬停?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！