:popover-open

基线 2024

新功能

自 2024年4月起，此功能可在最新的设备和浏览器版本中使用。此功能可能无法在旧版设备或浏览器中使用。

**:popover-open** CSS 伪类 表示处于显示状态的 弹出框 元素（即具有 popover 属性 的元素）。您可以使用它仅在显示弹出框元素时对其应用样式。

语法

css
:popover-open {
  /* ... */
}

示例

默认情况下，弹出框显示在视口的中间。用户代理样式表中是这样实现默认样式的

css
[popover] {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  border: solid;
  padding: 0.25em;
  overflow: auto;
  color: CanvasText;
  background-color: Canvas;
}

要覆盖默认样式并使弹出框显示在视口的其他位置，您可能需要使用类似以下内容覆盖上述样式

css
:popover-open {
  width: 200px;
  height: 100px;
  position: absolute;
  inset: unset;
  bottom: 5px;
  right: 5px;
  margin: 0;
}

规范

规范
HTML 标准
# selector-popover-open

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅