CSS SNIPPET

  返回

弹出菜单  交互体验

在鼠标悬停或元素获得焦点时显示一个可交互的弹出菜单。

HTML
<div class="reference" tabindex="0"><div class="popout-menu">Popout menu</div></div>
CSS
.reference {
  position: relative;
  background: tomato;
  width: 100px;
  height: 100px;
}
.popout-menu {
  position: absolute;
  visibility: hidden;
  left: 100%;
  background: #333;
  color: white;
  padding: 15px;
}
.reference:hover > .popout-menu,
.reference:focus > .popout-menu,
.reference:focus-within > .popout-menu {
  visibility: visible;
}
效果演示
Popout menu
代码说明
  1. 父元素的position: relative 为子元素建立一个笛卡尔定位上下文。
  2. position: absolute 将弹出菜单抽出文档流,并根据父元素进行定位。
  3. left: 100% 将弹出菜单从父元素的左边移动到右边。
  4. visibility: hidden 实现开始时的菜单隐藏,以便进行动画过渡(与display: none不同)。
  5. .reference:hover > .popout-menu 表示当.reference 有鼠标悬停时,选中具有 .popout-menu样式类的直接子元素,将它的visibility 修改为 visible,从而显示弹出菜单。
  6. .reference:focus > .popout-menu 表示当.reference 获得焦点时,显示弹出菜单。
  7. .reference:focus-within > .popout-menu 用来确保输入焦点在父元素内时保持 弹出菜单的显示。
浏览器支持

100.0%