[英]Trigger css hover in javascript
So I'm working a coin flip minigame and I need an animation. 所以我正在玩投币小游戏,需要动画。 My code so far is:
到目前为止,我的代码是:
HTML: HTML:
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="http://i.imgur.com/YS84SGq.png" alt="" />
</div>
<div class="back">
<img src="http://i.imgur.com/lDR0Xj8.png" alt="" />
</div>
</div>
</div>
CSS: CSS:
.flip-container
{
position: absolute;
perspective: 1000;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin-top: 25%;
}
.flip-container, .flip-container .front, .flip-container .back
{
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
border-radius: 150px;
width: 150px;
height: 150px;
overflow: hidden;
}
.front img, .back img
{
width: 150px;
height: 150px;
}
.flip-container .flipper
{
transition: 3s;
transform-style: preserve-3d;
position: relative;
}
.flip-container .flipper .front, .flip-container .flipper .back
{
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.flip-container .flipper .front
{
z-index: 2;
transform: rotateY(0deg);
}
.flip-container .flipper .back
{
transform: rotateY(180deg);
}
.flip-container:hover .flipper, .flip-container.hover .flipper
{
transform: rotateY(720deg);
}
A working demo: https://jsfiddle.net/k0pjcftp/ 一个有效的演示: https : //jsfiddle.net/k0pjcftp/
As you can see, animation works fine on hover. 如您所见,动画在悬停时效果很好。 But I need to trigger it somehow through javascript, and I have no idea how.
但是我需要通过javascript触发它,我也不知道如何触发。 I tried adding a css class with
transform(...)
but animation wasn't working. 我尝试添加带有
transform(...)
的CSS类,但是动画不起作用。 Any ideas? 有任何想法吗?
You can use jQuery's hover method and toggle the hover
class on your container. 您可以使用jQuery的hover方法,并在容器上切换
hover
类。
$('.flip-container').hover(function() { $(this).toggleClass('hover'); });
.flip-container { position: absolute; perspective: 1000; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: 25%; } .flip-container, .flip-container .front, .flip-container .back { -moz-border-radius: 150px; -webkit-border-radius: 150px; border-radius: 150px; width: 150px; height: 150px; overflow: hidden; } .front img, .back img { width: 150px; height: 150px; } .flip-container .flipper { transition: 3s; transform-style: preserve-3d; position: relative; } .flip-container .flipper .front, .flip-container .flipper .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } .flip-container .flipper .front { z-index: 2; transform: rotateY(0deg); } .flip-container .flipper .back { transform: rotateY(180deg); } /*.flip-container:hover .flipper,*/ .flip-container.hover .flipper { transform: rotateY(720deg); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="flip-container"> <div class="flipper"> <div class="front"> <img src="http://i.imgur.com/YS84SGq.png" alt="" /> </div> <div class="back"> <img src="http://i.imgur.com/lDR0Xj8.png" alt="" /> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.