Tarık Akyüz Tarık Akyüz - 6 months ago 15
CSS Question

Animation not stopping on hover using webkit-animation-play-state

Hover doesnt work. When the mouse hovers the div, the animation must stop and never start again. I would prefer a non-jQuery solution.

CSS:

.box:hover { -webkit-animation-play-state: paused;}


Check a fiddle here.

Answer

There is no way to achieve a one-time hover without JavaScript or jQuery:

CSS:

.one_time {
    -webkit-animation-play-state: paused;
}

JavaScript:

function hoverOnce(target, type, listener) {
    target.addEventListener(type, function fn(event) {
        target.removeEventListener(type, fn);
        listener(event);
    });
};

hoverOnce(document.getElementById("myelement"), "mouseover", function (event) {
    document.getElementById("myelement").className = "one_time";

});

jQuery:

$(".button-color-2").one("mouseenter", function(e){
    $("#myelement").addClass("one_time");
});
Comments