: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

瀏覽器相容性

另見