CSS селектор :popover-open — відкрита спливна панель

CSS псевдоклас :popover-open вибирає елемент із атрибутом popover, який зараз відкритий.

правити

Загальний опис

Popover API дозволяє робити спливні панелі, підказки й меню взагалі без JavaScript: атрибут popover на панелі й popovertarget на кнопці. Браузер сам подбає про закриття по Esc і клік поза межами.

:popover-open — гачок для анімації появи.

правити

+ додати пораду чи нотатку

Синтаксис

:popover-open

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
popover-open	114+	125+	17+	100+	114+	-

Підтримка: мобільні переглядачі

Переглядач
popover-open	114+	yes	yes	17+

Приклади

+ запропонувати свій приклад у пісочниці

<button popovertarget="tip">Показати підказку</button>

<div id="tip" popover>
    Я з'явився без JavaScript.
</div>

[popover] {
    opacity: 0;
    transition: opacity .2s;
}

[popover]:popover-open {
    opacity: 1;
}