:popover-open

Die :popover-open CSS Pseudoklasse repräsentiert ein Popover-Element (d.h. eines 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

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

Beispiele

Standardmäßig erscheinen Popovers in der Mitte des Viewports. Die Standardstilsetzung wird im UA-Stylesheet so erreicht:

[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 ändern und das Popover an einer anderen Stelle im Viewport erscheinen zu lassen, könnten Sie die obigen Stile mit etwas wie diesem überschreiben:

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Popover API
• popover globales HTML-Attribut