javascript - 如何在悬停后仅使用 css 而不是 Javascript 延迟菜单可见性

标签 javascript html css wordpress

我试图在用户离开菜单悬停后将其延迟 15 秒。我只想使用 css 而不是 Javascript 来做到这一点。可能的?是的,当用户将鼠标悬停在它上面时,当光标静止几秒钟时,菜单就会消失。

尝试过:

ul.dropdown-menu li  { transition: 
0s background-color;}

ul.dropdown-menu li a:hover { 
transition-delay: 15s; }

不起作用。

<div class="collapse navbar- 
collapse navbar-ex1-collapse">. 
<ul 
id="menu" class="menu"><li 
id="menu-item-1496" 
class="menu- 
item menu-item-type-post_type 
menu- 
item-object-page menu-item-home 
current-menu-item page_item 
page- 
item-19 current_page_item menu- 
item-has-children menu-item- 
1496 
dropdown active"><a 
title="Home" 
href="https://adsler.c
o.uk/">Home 
</a><span class="dropdown- 
toggle 
shapely-dropdown" data- 
toggle="dropdown"><i class="fa 
fa- 
angle-down" aria- 
hidden="true">. 
</i>. </span>
<ul role="menu" class=" 
dropdown-menu">
<li id="menu-item-1502" class="fa 
fa-user menu-item menu-item-type- 
post_type menu-item-object-page 
menu-item-1502"><a title="Create 
Adsler Account" 
href="https://adsler.co.uk/create- 
account/">Create Adsler 
Account</a>.  </li>

最佳答案

您需要将延迟和动画切换到常规状态,检查this article通过 css 技巧 了解如何实现您想要的结果。

关于javascript - 如何在悬停后仅使用 css 而不是 Javascript 延迟菜单可见性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56220694/

相关文章:

javascript - 窗口侧边栏 addPanel 在 Firefox 中不起作用

javascript - JS 增加变量如果存在,否则创建新的

Javascript 短条件含义

javascript - 如何从 javascript 文件(而不是 vue 组件)获取 vuex 状态

javascript - CKEditor 在所有 <p> 中插入 <q>

html - 悬停时背景图像更改不起作用

javascript - 弹出页面上的 jQuery 预填充表单字段

javascript - 当在窗口中的任何位置单击选择框时,如何获得选择框关闭事件?

html - 使用 DIV 在 CSS 中进行多框布局

css - 停止 Firefox 以 rgb() 形式呈现内联颜色