:popover-open

Baseline 2025
Newly available

Since January 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die :popover-open CSS-Pseudoklasse repräsentiert ein Popover-Element (d. h. ein Element mit einem popover-Attribut), das sich im angezeigten Zustand befindet. Sie können dies verwenden, um Popover-Elemente nur dann zu stylen, wenn sie angezeigt werden.

Syntax

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

Beispiele

Standardmäßig erscheinen Popover in der Mitte des Viewports. Diese Standardgestaltung wird im UA-Stylesheet folgendermaßen umgesetzt:

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;
}

Um die Standardstile zu überschreiben und das Popover an einer anderen Stelle im Viewport erscheinen zu lassen, könnten Sie die obigen Stile mit etwas wie diesem überschreiben:

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

Spezifikationen

Specification
HTML
# selector-popover-open
Selectors Level 4
# selectordef-popover-open

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch