使用 webkit-animation CSS 将项目悬停延迟 1 秒答案

【问题标题】：Delay item hover by 1 second using webkit-animation CSS使用 webkit-animation CSS 将项目悬停延迟 1 秒
【发布时间】：2020-10-04 23:09:14
【问题描述】：

我尝试了多种方法将下拉菜单项的悬停延迟 1 秒。

transition-delay:1s; 不起作用。有人建议我通过一个带有 1 的 webkit 动画来做到这一点。

这是我的 CSS：

@media screen and (min-width: 769px) {
    .bss-megamenu-fw .dropdown-menu {
        -webkit-animation: 0.1s linear 1s normal forwards 1 fadein;
    }
}

@keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    83% { opacity:1; }
    100% { opacity:1; }
}

@-webkit-keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    83% { opacity:1; }
    100% { opacity:1; }
}

我很茫然，因为这不起作用。我怎样才能得到我的延迟？

【问题讨论】：

您知道您需要将鼠标至少停留在元素上一秒钟吗？
@TemaniAfif 我不确定你的意思。

标签： html css hover webkit

【解决方案1】：

我通过将以下内容添加到 .bss-megamenu-fw .dropdown-menu 类来修复它：

animation: 0.1s linear 0.5s normal forwards 1 fadein;

【讨论】：