:popover-open
La pseudo-classe CSS :popover-open
représente un élément popover (c'est-à-dire un élément avec un attribut popover
) qui est dans l'état ouvert. Vous pouvez l'utiliser pour appliquer un style aux éléments popovers uniquement lorsqu'ils sont affichés.
Syntaxe
:popover-open {
/* ... */
}
Exemples
CSS
Par défaut, les popovers apparaissent au milieu de la zone d'affichage (viewport). Le style par défaut porté par la feuille de styles de l'agent utilisateur ressemble à ceci :
[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;
}
Pour surcharger les styles par défaut et faire apparaître le popover ailleurs, vous pouvez remplacer les styles ci-dessus par quelque chose comme :
:popover-open {
width: 200px;
height: 100px;
position: absolute;
inset: unset;
bottom: 5px;
right: 5px;
margin: 0;
}
HTML
<button popovertarget="monpopo">Afficher/masquer le popover</button>
<div id="monpopo" popover="manual">Coucou ? Caché ?</div>
Résultat
Spécifications
Specification |
---|
HTML Standard # selector-popover-open |
Compatibilité des navigateurs
BCD tables only load in the browser