CSS-псевдокласс `:popover-open`

Базовая поддержка Недавно появился

Эта функция работает в последних версиях устройств и браузеров. Она может не работать на старых устройствах или в старых версиях браузеров. Функция доступна во всех браузерах с января 2025 года.

:popover-open CSS псевдокласс обозначает элемент всплывающего окна (то есть элемент с атрибутом popover), который находится в открытом состоянии. Это позволяет применять стили к элементам всплывающих окон только тогда, когда они отображаются.

Синтаксис

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

Примеры

По умолчанию всплывающие окна появляются в центре области просмотра. Такое оформление по умолчанию задаётся в таблице стилей пользовательского агента следующим образом:

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

Чтобы переопределить стили по умолчанию и расположить всплывающее окно в другом месте области просмотра, можно изменить указанные выше стили, например, так:

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

Спецификации

Спецификация
HTML # selector-popover-open
Selectors Level 4 # selectordef-popover-open

Совместимость с браузерами

	Настольные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`popover-open`	114	114	125	100	17	114	125	76	17	23.0	114	17

См. также

Popover API
popover глобальный атрибут HTML

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:popover-open