pseudo-class :popover-open CSS

تعریف و استفاده

CSS :popover-open pseudo-class برای انتخاب و تنظیم استایل هر عنصری که در حالت نمایش پوپ آپ قرار دارد استفاده می‌شود.

به صورت پیش‌فرض، مرورگر پوپ آپ را در وسط视‌گاه نمایش می‌دهد.

استایل پیش‌فرض پوپ آپ در مرورگرها به صورت زیر است:

[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 pseudo-class.

مثال

استایل‌های هر عنصری که در حالت نمایش پوپ آپ قرار دارد را انتخاب و تنظیم کنید:

:popover-open {
  width: 150px;
  height: 150px;
  position: absolute;
  inset: unset;
  bottom: 25px;
  left: 25px;
  margin: 0;
  color: قرمز قهوه‌ای;
  background-color: نارنجی;
  font-size: 25px;
}

آزمایش کنید

آموزش CSS

:popover-open {
  اظهارات CSS;
}

جزئیات فنی

پشتیبانی مرورگر

اعداد در جدول نسخه اولین مرورگر را نشان می‌دهد که پseudo-class را به طور کامل پشتیبانی می‌کند.

مراجع مرتبط

ملاحظات:HTML پوپ آپ اپریشن