Question

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

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

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

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

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

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

请帮忙。谢谢！

更新

我第一次通过Stackoverflow问一个问题，结果很棒，多亏了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

尝试这样的事情

（仅为：悬停情况定义实际延迟将仅使红色延迟。返回黑色将是即时的。如果您想要双向延迟转换，只需将转换延迟设置为默认状态。）

<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网站的菜单上添加悬停延迟？

1 个答案: