悬停时停止 CSS 动画答案

【问题标题】：Stall CSS animation on hover悬停时停止 CSS 动画
【发布时间】：2021-01-02 08:09:31
【问题描述】：

对于我的项目，我编写了一个纯 CSS 悬停菜单。当页面加载菜单 (#drop) 时，会等待几秒钟，然后再向上移出视图。您可以通过将鼠标悬停在页面顶部的不同元素 (#hover) 上来返回菜单。

它非常适合我，但有一个问题。当您加载页面时，您仍将鼠标悬停在 #hover 上，#drop 在等待完成后会向上移动片刻，然后以故障方式向下移动。

您可以在这里亲自体验：https://jsfiddle.net/27mbnpwk/

只需运行脚本并将光标放在文本上，等待几秒钟即可看到它跳转。

如果您没有使用纯 CSS 将鼠标悬停在 #drop 上，有没有办法让菜单仅上升？或者，否则，用js？

【问题讨论】：

我不知道它是否对你有帮助，但也许检查一下这个答案：stackoverflow.com/questions/30935666/…
谢谢，@LinkinTED，帮助我用 jquery 重新创建它：jsfiddle.net/d09gsfo5 你链接的答案不包括初始动画，但我发现这个答案帮助我添加它：stackoverflow.com/questions/32755219/…
在纯 CSS 中不可能，当您重新加载而不移动鼠标时，页面不会注册鼠标事件 F5 不单击刷新按钮然后将鼠标移入 在这种情况下不会出现闪烁，您需要 JavaScript 来读取鼠标位置然后相应地更改 css

标签： css drop-down-menu hover css-animations

【解决方案1】：

我找不到纯 CSS 的方法，但有一个简单的 jquery 解决方案（感谢@LinkinTED）：

两个 CSS 类，一个用于菜单向下，一个用于菜单向上：

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

然后在 javascript 中创建一个在页面加载后启动的函数。此函数等待 3 秒，随后将 up 类添加到元素，将其向上推，不可见。并且每次#hover 都会更改类的函数悬停在上面：

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');
    }
);

在这里测试它： https://jsfiddle.net/g9oq0124/1/

如果有人找到纯 css 或更简洁的方法来做这件事，我很想听听！

【讨论】：