【问题标题】:Delay on mouse menu out only仅延迟鼠标菜单
【发布时间】:2019-05-09 19:47:33
【问题描述】:

Menu有人可以帮忙吗?我已经尝试过这个CSS Dropdown Menu: Add delay on mouse out,但是在离开主导航栏选项并将鼠标光标直接移向子菜单选项时,菜单消失了吗?有什么办法可以延迟菜单不会立即消失?

https://www.waterstreetgallery.co.uk/en/main菜单

到目前为止,它正确地定位它并过渡而不是悬停?

.menu-block_item:hover .menu-block_item-submenu {
    transition-delay: 1s;
    transition-duration: 0.5s;
}

【问题讨论】:

  • 您能否创建一个包含重现此错误的最少量代码的 sn-p?阅读有关创建MCVE 或查看how to ask 的信息。欢迎使用 StackOverflow。
  • 一个类 menu-items_z 在悬停时添加并在光标移动时删除,您可以延迟删除此类

标签: css


【解决方案1】:

您还必须在非伪类上设置转换延迟和持续时间。

.menu-block_item .menu-block_item-submenu {
transition-delay: 1s;
transition-duration: 0.5s;

}

如果您只是将它放在伪 :hover 类上,那么过渡延迟仅在鼠标悬停时应用。

鼠标离开的那一刻,过渡延迟不再应用,这就是你的菜单立即消失的原因。

【讨论】:

  • 非常感谢!知道如何找到非伪类吗?
  • assets/style.css 有大约 200 行 re menu ,据我所知可能是这样吗?
  • 查看该文件中的第 99 行。它将转换设置为 0。将其设置为 0.5s 并在其下方添加 transition-delay: 1s
  • 就是这样,非常感谢!知道需要做什么来避免菜单外的口吃和状态变化吗? vimeopro.com/user5865079/technicalwaterstreetgallery.co.uk/en/boxing-hares-stoneware-02.html
  • 我似乎除了 .menu-block_item-submenu 之外,还有其他元素在悬停事件中隐藏/显示,他们还必须启用转换
猜你喜欢
  • 2016-12-20
  • 2014-03-29
  • 2012-01-15
  • 1970-01-01
  • 1970-01-01
  • 2023-03-28
  • 1970-01-01
  • 2012-03-11
  • 1970-01-01
相关资源
最近更新 更多