鼠标悬停时菜单悬停延迟

【问题标题】：Delay For Menu Hover In Mouse Out鼠标悬停时菜单悬停延迟
【发布时间】：2016-12-20 08:32:29
【问题描述】：

我用过 RocketTheme Joomla 模板。

我尝试延迟菜单悬停。

我想在菜单悬停时使用以下 CSS 来延迟。它正在工作。请查看链接-www.test2.guru99.com/

.gf-menu li .dropdown {
transition: opacity 5.0s ease-out 0.0s;
}

我的要求是—— 当鼠标移出时菜单仍然出现几秒钟。

我的网址是 - www.test2.guru99.com/

请帮帮我！

【问题讨论】：

标签： javascript css joomla

【解决方案1】：

过渡：[animationTime] [delayTime] ...

li > ul{
  visibility:hidden;
  opacity:0;
  transition: 0.5s 2s; /* put the mouseleave wait time here */
}
li:hover > ul{
  visibility:visible;
  opacity:1;
  transition: 0.5s 0s; /* put the mouseenter wait time here */
}

<ul>
  <li>
    <a>List item (will take 2sec to fade out)</a>
    <ul>
      <li><a>Sub-List item 1</a></li>
      <li><a>Sub-List item 2</a></li>
    </ul>
  </li>
</ul>

在鼠标输入时，:hover 将触发，并且有 0s 的 transition delay 规则（无延迟）。
在 mouseleave 时，将使用初始规则（2s 延迟）。

【讨论】：