Question

我有一些CSS（见下文），当用户将鼠标悬停在外场时，我想让内部div（kitty）在屏幕上翻译。这样工作正常但是，正如您所期望的那样，当用户从外部字段中移除他或她的鼠标时，动画“倒退”然后（当然）如果用户再次徘徊，它会重放。我试图找出如何让这个动画运行一次（用户第一次在外场上盘旋）然后不再回放或再次播放，无论他或她将来徘徊在什么地方。这可能吗？我不想在我的页面上添加另一个脚本，但如果这是唯一的解决方案，那么我会对它开放。提前谢谢！

威尔

<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>

Answer 1

恕我直言，纯CSS无法做到。最简单的解决方案是使用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悬停转换仅运行一次，而不是在用户“不悬停”后“倒回”？

1 个答案: