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
选择器分别设置下拉列表的显示和隐藏效果。
粉丝
0
关注
0
收藏
0