悬停时停止 CSS 动画

Posted 2023-03-06

【中文标题】悬停时停止 CSS 动画

【英文标题】：Stall CSS animation on hover

【发布时间】：2021-01-02 08:09:31

【问题描述】：

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

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

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

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

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

【问题讨论】：

我不知道它是否对你有帮助，但也许检查一下这个答案：***.com/questions/30935666/…

谢谢，@LinkinTED，帮助我用 jquery 重新创建它：jsfiddle.net/d09gsfo5 你链接的答案不包括初始动画，但我发现这个答案帮助我添加它：***.com/questions/32755219/…

在纯 CSS 中不可能，当您重新加载而不移动鼠标时，页面不会注册鼠标事件 F5 不单击刷新按钮然后将鼠标移入 在这种情况下不会出现闪烁，您需要 javascript 来读取鼠标位置然后相应地更改 css

【参考方案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 或更简洁的方法来做这件事，我很想听听！