Question

我使用过RocketTheme Joomla模板。

我已尝试延迟菜单悬停。

我想在菜单悬停中使用以下css for Delay。它正在发挥作用。请检查链接 - www.test2.guru99.com/

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

我的要求是 - 当鼠标移出菜单时，菜单仍会显示几秒钟。

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

请帮助我！

Answer 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>

在mouseenter上，:hover会触发，transition delay规则为0s（无延迟）。
在mouseleave上将使用初始规则（2s延迟）。

菜单悬停鼠标输出延迟

1 个答案: