下拉菜单消失前的延迟
Posted
技术标签:
【中文标题】下拉菜单消失前的延迟【英文标题】：Delay before drop-down menu disappears 【发布时间】：2016-01-09 00:34:01 【问题描述】：我已经设法使用 CSS 和 html 创建了一个下拉菜单。鼠标悬停时会出现下拉菜单。
我希望下拉菜单在鼠标悬停 1 秒后消失。为此，我尝试添加
transition: display 1s;
进入.dropdown:hover .dropdown_list, .dropdown_list:hover，但它什么也没做。
我的代码：
*
margin: 0;
padding: 0;
header
position: fixed;
height: 35px;
width: 100%;
background: black;
.top-container
margin-top: 7px;
/* Code for drop-down list */
.dropdown
margin-left: 100px;
display: inline-block;
color: #FFF;
.dropdown:hover
text-shadow:0px 4px 7px white;
.dropdown:hover .dropdown_list,
.dropdown_list:hover
display: block;
top:100%;
transition: display 1s; /* Doesn't work */
.dropdown_list
list-style: none;
display: none;
position: absolute;
color: red;
width: 100px;
.dropdown_list li
background: yellow;
li
border: 1px solid black;
<body>
<header>
<div class="top-container">
<div class="dropdown">Dropdown ❱
<ul class="dropdown_list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div>
</header>
</body>如何让下拉菜单在悬停后延迟一秒消失？没有任何 jQuery 或 javascript 这可能吗？
【问题讨论】：
Display 属性不受转换支持。相反，我会坚持让你使用 height:0px; 到 heigth:xx px; 来获得过渡效果。
@divy3993 好的。你能告诉我为什么this 也会失败吗？
【参考方案1】：
转换仅适用于具有数值的属性。显示使用离散值，因此无法接收任何过渡效果。
只需 CSS，您就可以使用 top 或类似属性来“隐藏”下拉菜单 (jsfiddle)。
.dropdown:hover .dropdown_list,
.dropdown_list:hover
top: 100%;
transition: none;
.dropdown_list
top: -10000%;
display: block;
transition: top 1s step-end;
【讨论】：
感谢@Ryan 强调了过渡工作的重要条件，即仅适用于具有 Numerical 值的属性以上是关于下拉菜单消失前的延迟的主要内容，如果未能解决你的问题，请参考以下文章