Stall CSS animation on hover

Question

For my project I wrote a pure CSS hover menu. When the page loads the menu (#drop) waits for a few seconds before moving up, out of view. You can get the menu back by hovering over a different element (#hover) at the top of the page.

It works perfectly for me, but there is one issue. When you load the page, and you remain hovered over #hover, #drop moves up for a moment after it has finished waiting and moves back down in a glitchy manner.

You can experience it yourself here: https://jsfiddle.net/27mbnpwk/

Just run the script and put your cursor on the text, wait a couple of seconds and see it jump.

Is there a way to make the menu only go up if you're not hovering over #drop with pure CSS? Or, otherwise, with js?

I don't know if it helps you, but maybe check this answer: https://stackoverflow.com/questions/30935666/keyframe-css-animation-overwrites-hover-transition — GreyRoofPigeon, Sep 15 '20 at 14:52
Thanks, @LinkinTED, that helped me recreate it with jquery: https://jsfiddle.net/d09gsfo5/ The answer you linked did not include the initial animation, but I found this answer that helped me add it: https://stackoverflow.com/questions/32755219/execute-js-function-after-some-time-of-page-load — June, Sep 15 '20 at 16:06
Not possible in Pure CSS, The page doesn't register mouse event when you reload without moving the mouse **F5 not clicking the refresh button then move the mouse in** In this case flicking wont occur, You need JavaScript to read mouse position then alter css accordinly — Rainbow, Sep 15 '20 at 19:17

score 0 · Accepted Answer · answered Sep 16 '20 at 10:11

I could not find a way with pure CSS, but there is an easy solution with jquery (thanks to @LinkinTED):

Two CSS classes, one for the menu being down, one for the menu being up:

.down{
    transform: translate(0,00%);
}
.up{
    transform: translate(0,-175%);
}

Then in javascript you create a function that initiates after the page is loaded. This function waits 3 seconds and subsequently adds the up class to the element, pushing it up, out of view. And a function that changes the class each time #hover is hovered over:

window.onload = function() {
  setTimeout(
    function(){
      $('#drop').removeClass('down').addClass('up');},
    3000);
};
$('#hover').hover(      
    function() {
        // mouse in
        $('#drop').removeClass('up').addClass('down');
    },    
    function() {
        // mouse out
        $('#drop').removeClass('down').addClass('up');
    }
);

Test it here: https://jsfiddle.net/g9oq0124/1/

I would love to hear it if anyone does find a pure css, or cleaner way to do this!

Stall CSS animation on hover

1 Answers1