javascript - 在 javascript 中触发 css hover

Question

所以我正在制作一个抛硬币迷你游戏，我需要一个动画。到目前为止我的代码是:
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:

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

工作演示:https://jsfiddle.net/k0pjcftp/
如您所见，动画在悬停时效果很好。但我需要通过 javascript 以某种方式触发它，但我不知道如何触发。我尝试使用 transform(...) 添加一个 css 类，但动画无法正常工作。有什么想法吗？

Answer 1

您可以使用 jQuery's hover method并切换容器上的 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>