悬停时停止 CSS 动画

Question

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

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

你可以在这里亲身体验一下：https://jsfiddle.net/27mbnpwk/

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

有没有办法让菜单仅在您不使用纯 CSS 悬停在 #drop 上时才会出现？或者，否则，用js？

Answer 1

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

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

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

然后在 javascript 中创建一个在页面加载后启动的函数。此函数等待 3 秒，然后将 up class 添加到元素，将其向上推，超出视图。每次 #hover 悬停时都会更改 class 的函数：

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 或更清洁的方法，我很想听听！

悬停时停止 CSS 动画

Stall CSS animation on hover

css

hover

css-animations

drop-down-menu