:popover-open

Baseline 2024
新推出

自 ⁨2024 年 4 月⁩ 起,此功能可在最新的设备和浏览器版本中运行。此功能可能不适用于较旧的设备或浏览器。

:popover-open CSS 伪类表示处于显示状态的 弹窗元素(即具有 popover 属性的元素)。你可以使用它来仅在弹窗元素显示时为其应用样式。

语法

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

示例

默认情况下,弹窗出现在视口的中间。默认样式在 UA 样式表中是这样实现的:

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
选择器 Level 4
# selectordef-popover-open

浏览器兼容性

另见