延迟菜单鼠标悬停

我已经使用RocketTheme Joomla模板。延迟菜单鼠标悬停

我尝试延迟菜单悬停。

我希望在菜单悬停中使用下面的CSS来延迟。它正在工作。请检查链接 - www.test2.guru99.com/

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

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

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

请帮帮我！

来源

2016-08-13 Tushar Korat

过渡：[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将触发，并有中0s（无延迟）的transition delay规则。
在mouseleave上将使用初始规则（延迟2s）。

来源

2016-08-13 13:20:22

延迟菜单鼠标悬停

回答

相关问题