CSS实践：hover伪类和延迟实现下拉列表

实现鼠标经过按钮时显示下拉菜单的交互效果：

<button class='btn'>菜单</button>
<ul class='panel'>
  <li class='panel-item'>苹果</li>
  <li class='panel-item'>葡萄</li>
  <li class='panel-item'>香蕉</li>
  <li class='panel-item'>橙子</li>
</ul>
复制代码

目标是显示下拉菜单当鼠标悬停在按钮上时。 css代码非常简单：

.btn:hover + .panel, .panel:hover{
  visibility: visible
}
.panel{
  visibility: hidden;
  width: 100px;
  height: 200px;
  background: #DDD;
}
.panel-item{
  width: 100%;
  height: 50px;
  list-style: none;
  line-height: 50px;
}
复制代码

但是，上面的实现有一个小bug。如果按钮和菜单之间有间隙，则在鼠标移至下拉框之前，下拉框会关闭。这个问题可以通过在Transition的帮助下添加延迟效果来解决。 ？ 来源：掘金
版权归作者所有。如需商业转载，请联系作者授权。非商业转载请来源。