如何使CSS3悬停转换只运行一次，而不是在用户“悬停”后“后退”？ [英] How can I make a CSS3 hover transition run only once and not 'rewind' after the user 'un-hovers'?

问题描述

我有一些CSS（见下文），我想要导致内部div（kitty）翻译跨屏幕，当用户悬停在外部字段。这是工作正常，但是，正如你所期望的，当用户从外部字段删除他或她的鼠标，动画倒带，然后（当然）如果用户再次悬停重放。我试图找出如何让这个动画运行一次（第一次用户悬停在外部字段），然后不后退或播放，无论他或她将来悬停在未来。这可能吗？我不喜欢添加另一个脚本到我的页面，但如果这是唯一的修复，那么我对它开放。提前感谢！

I have some CSS (see below) and I want to cause the inner div (kitty) to translate across the screen when the user hovers over the outer field. This is working fine but, as you would expect, when the user removes his or her mouse from the outer field, the animation 'rewinds' and then (of course) it replays if the user hovers again. I am trying to figure out how to get this animation to run once (the first time the user hovers over the outer field) and then not rewind or play ever again, no matter what he or she hovers over in future. Is this possible? I'd prefer not to add another script to my page, but if that is the only fix then I'm open to it. Thanks in advance!

将

<style type="text/css">
div.kitty {
    position: absolute; 
    bottom: 50px; 
    left: 20px; 
    -webkit-transition: all 3s ease-in; 
    -moz-transition: all 3s ease-in; 
    -o-transition: all 3s ease-in; 
    -ms-transition: all 3s ease-in;
    animation-iteration-count: 1;
}
#actioner {
    padding: 0px;
    height: 400px;
    position: relative;
    border-width: 1px;
    border-style: solid;
}
#actioner:hover div.kitty{
    -webkit-transform: translate(540px,0px); 
    -moz-transform: translate(540px,0px); 
    -o-transform: translate(540px,0px); 
    -ms-transform: translate(540px,0px);
}
</style>

<div id="actioner">
    <div class="kitty">Kitty-Cat Sprite</div>
</div>

推荐答案

IMHO，它不可能与纯CSS 。
最简单的解决方案是使用jQuery。

IMHO, it is not possible to do with pure CSS. The easiest solution will be using jQuery.

// css
.actioner{
    -webkit-transform: translate(540px,0px); 
    -moz-transform: translate(540px,0px); 
    -o-transform: translate(540px,0px); 
    -ms-transform: translate(540px,0px);
}

// script
$(function(){
    $('.kitty').one("mouseover", function() {
        $('.kitty').addClass('actioner');
    });
});

这篇关于如何使CSS3悬停转换只运行一次，而不是在用户“悬停”后“后退”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！