[英]Delay For Menu Hover In Mouse Out
I have used RocketTheme Joomla Templates. 我已经使用了RocketTheme Joomla模板。
I have Try to Delay for Menu hover. 我有尝试延迟菜单悬停。
I want used following css for Delay in menu hover. 我想在菜单悬停中使用以下css作为延迟。 And it's working.
它正在工作。 Please check link - www.test2.guru99.com/
请检查链接-www.test2.guru99.com/
.gf-menu li .dropdown {
transition: opacity 5.0s ease-out 0.0s;
}
My Requirement is - when the mouse is moved out menu still appear for seconds. 我的要求是-移出鼠标后,菜单仍会显示几秒钟。
My site url is - www.test2.guru99.com/ 我的网站网址是-www.test2.guru99.com/
Please Help me! 请帮我!
transition: [animationTime] [delayTime] ...
转换:[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>
On mouseenter the :hover
will trigger, and there's the transition delay
rule of 0s
(no delay). 在mouseenter上,
:hover
将触发,并且transition delay
规则为0s
(无延迟)。
On mouseleave the initial rule will be used ( 2s
delay). 在mouseleave上,将使用初始规则(延迟
2s
)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.