css中怎么将下拉列表延迟1秒消失

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中可以通过 transition-delay 属性实现下拉列表延迟1秒消失。首先,我们需要设置下拉列表的样式:.dropdown { position: relative; } .dropdow

CSS中可以通过 transition-delay 属性实现下拉列表延迟1秒消失。

首先,我们需要设置下拉列表的样式:

.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
} 

在HTML中添加下拉列表:

<div class="dropdown">
  <button>下拉列表</button>
  <ul class="dropdown-menu">
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
  </ul>
</div> 

然后,我们需要添加以下CSS代码:

.dropdown:hover .dropdown-menu {
  display: block;
  transition-delay: 1s;
}

.dropdown-menu:hover {
  display: block;
}

.dropdown-menu {
  transition: all .2s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
} 

当鼠标悬停在下拉列表按钮上时,下拉列表将显示,同时设置 transition-delay 属性为1秒,表示下拉列表延迟1秒后消失。

当鼠标悬停在下拉列表上时,下拉列表将保持显示,直到移开鼠标。

我们还需要设置下拉列表的过渡效果,包括过渡时间、过渡类型、透明度和可见性设置。

最后,我们使用 .dropdown:hover .dropdown-menu 选择器和 .dropdown-menu:hover 选择器分别设置下拉列表的显示和隐藏效果。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中怎么将下拉列表延迟1秒消失

粉丝

0

关注

0

收藏

0

已有0次打赏