2

私はいくつかの CSS (以下を参照) を持っており、ユーザーが外側のフィールドにカーソルを合わせたときに、内側の div (キティ) を画面全体に移動させたいと考えています。これは正常に動作していますが、ご想像のとおり、ユーザーがマウスを外側のフィールドから離すと、アニメーションが「巻き戻され」、(もちろん) ユーザーが再びホバーすると再生されます。私は、このアニメーションを 1 回 (ユーザーが外側のフィールドに初めてホバーしたとき) 実行し、後で何をホバーしても、巻き戻したり再生したりしないようにする方法を見つけようとしています。これは可能ですか？自分のページに別のスクリプトを追加したくないのですが、それが唯一の修正である場合は、喜んで受け入れます。前もって感謝します！

意思

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

1 に答える 1

4

私見、純粋な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');
    });
});
于 2012-04-21T13:50:42.287 に答える