:popover-open

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

Syntax

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

Beispiele

Standardmäßig erscheinen Popovers in der Mitte des Ansichtsfensters. Die Standardformatierung wird im UA-Stylesheet folgendermaßen erreicht:

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 Ansichtsfenster 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 Standard
# selector-popover-open

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch