css 悬停时显示交互式弹出菜单

>>> 效果预览

悬停时显示交互式弹出菜单。

HTML

<div class="reference">
  <div class="popout-menu">
    Popout menu
  </div>
</div>

CSS

.reference {
  position: relative;
}
.popout-menu {
  position: absolute;
  visibility: hidden;
  left: 100%;
}
.reference:hover > .popout-menu {
  visibility: visible;
}

说明

1. position: relative 在参考父项上为其子项建立笛卡尔定位上下文。
2. position: absolute 将弹出式菜单从文档流中移出，并将其与父级相关。
3. left: 100% 将弹出式菜单的左侧宽度从其父宽度的left: 100%移开。
4. visibility: hidden 最初隐藏弹出菜单并允许转换(与display: none ) .
5. .reference:hover > .popout-menu 意味着当.reference 悬停在上方时，选择具有.popout-menu类的直接子项并将它们的 visibility 更改为visible ，这将显示弹出窗口。