Как предотвратить нажатие кнопок под фонами CSS Popover? [дублировать] ⇐ Html

[Anonymous]

## Примечание:
Этот вопрос не является дубликатом, так как другой вопрос имеет нулевые одобренные ответы, и ни один из предоставленных ответов не работает для меня.
В то же время, так как сейчас это невозможно. для самостоятельного удержания (вопрос закрыт, ниже я предоставляю ответ только CSS , предоставленный пользователем режимов, который удалил свое решение из комментариев.
i Я внедряю простые элементы Popover на моем веб -сайте.
Они принимают C..mb_popbox::backdrop {
backdrop-filter: blur(5px);

}
< /code>
Проблема: < /h2>
При нажатии за пределы Popover: < /p>
желаемый эффект должен быть для выключения Элемент Popover, щелкнув только в любом случае. Очень раздражает < /p>
Пример < /h2>
html: < /p>


Menu

• Link 1

Zamknij

< /code>
css: < /p>
.mb_popbox {
width: 70%;
margin: 2rem auto;
min-height: 20rem;
max-height: 80%;
padding: 3rem;
background: #444;
color: #fff;
border: 3px solid #eee;

}

.mb_popbox::backdrop {
backdrop-filter: blur(5px);

}
< /code>
todo < /h2>
Есть ли какой-нибудь книжный способ предотвратить случайную ссылку и нажатия кнопки? < /p>
Обходной путь очевиден: сделайте 100% шириной и 100% высокий див, а затем постройте фактический полезный контент шириной 80% и высотой 80% в верхней части площади фона. Плюс необходимый JS для кликов по «внешней». Я хочу избежать этого, так как это не элегантно IMO. /> Примечание: до тех пор, пока класс .mb_popbox присваивается всем Popovers, это решение работает для всех всплывающих всплывающих часов.
/* filter element not supposed to catch mouse events */
body:has(:popover-open) {
pointer-events: none;
}

/* then allow click from #mypopover */
.mb_popbox :is(button, a) {
pointer-events: auto;
}


Подробнее здесь: https://stackoverflow.com/questions/794 ... s-backdrop