如何在 Volusion 网站的菜单上添加悬停延迟？

Question

首先，我正在使用 Volusion。这是我的网站：www.gtsimulators.com

因此，如果您对它足够熟悉，就会知道它的自定义功能非常有限。这是我无法弄清楚的事情：

我需要在鼠标悬停在类别菜单上时添加至少半秒 (0.5) 的轻微延迟（请查看网站），这样下拉菜单不会立即触发悬停在菜单上。我知道它可以用 CSS 或 Javascript 制作。无论哪种方式都对我有好处。

更多信息：正如我之前提到的，我无法访问编辑文件。我在这里找到了用于导航的 JS 文件 (/a/j/vnav.js)，但我无法编辑它。另外，这里是导航的 CSS 文件 (/a/c/vnav.css)，我也无法编辑它。

我可以访问主要的 html、css 和 js 文件。

如果需要，我很乐意提供更多信息。

请帮忙。谢谢！

更新：

我第一次通过 Whosebug 问问题，感谢 Adam K，结果很棒。

刚刚将此代码添加到我的 CSS 文件中并且运行良好：

.vnav__subnav, .overlay{
    transition: opacity 0.2s, max-height 99s;
    display: block!important;
    opacity: 0;
    pointer-events: none;
    max-height:0;
}

li:hover > .vnav__subnav,#display_menu_1:hover + .overlay{
    opacity: 1;
    pointer-events: auto;
    max-height:9999px;
    transition: opacity .5s, max-height 0s;
    transition-delay: .5s;
}

再次感谢 Adam 的及时回复。

Answer 1

尝试这样的事情

(仅为 :hover 情况定义实际延迟将只延迟变红。变回黑色将是即时的。如果你想要双向延迟转换，只需为默认状态设置 transition-delay。 )

<style>
  a{
    color:black;
    transition:color 0s;
    transition-delay:0;
  }
  a:hover{
    color:red;
    transition-delay:0.5s;
  }
</style>

好吧，我想向您展示一般用法。

您可以将其插入您网站的任何位置。我不认为延迟真的是 IMO 想要的。 - 试试这个。（它有效，已经在您网站上的开发工具中尝试过了）

<style>
.vnav__subnav, .overlay{
    transition: opacity .5s, max-height 99s;
    display: block!important;
    opacity: 0;
    pointer-events: none;
    max-height:0;
}
li:hover > .vnav__subnav,#display_menu_1:hover + .overlay{
    opacity: 1;
    pointer-events: auto;
    max-height:9999px;
    transition: opacity .5s, max-height 0s;
}
</style>

这将使您网站上的子菜单和叠加层显示流畅，而 javascript 或 HTML 没有任何变化。只需几行 css 即可；)

如何在 Volusion 网站的菜单上添加悬停延迟？

How to add a hover delay on a menu for a Volusion site?

javascript

css

volusion