:popover-open
Baseline
2024
Newly available
Since April 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Lớp giả :popover-open trong CSS (pseudo-class) đại diện cho một phần tử popover (tức là phần tử có thuộc tính popover) đang ở trạng thái hiển thị. Bạn có thể sử dụng lớp giả này để áp dụng kiểu cho các phần tử popover chỉ khi chúng đang được hiển thị.
Cú pháp
css
:popover-open {
/* ... */
}
Ví dụ
Theo mặc định, các popover xuất hiện ở giữa viewport. Kiểu mặc định được thực hiện như thế này trong stylesheet của tác nhân người dùng:
css
[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;
}
Để ghi đè các kiểu mặc định và làm cho popover xuất hiện ở vị trí khác trên viewport, bạn có thể ghi đè các kiểu trên bằng cách như sau:
css
:popover-open {
width: 200px;
height: 100px;
position: absolute;
inset: unset;
bottom: 5px;
right: 5px;
margin: 0;
}
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| HTML # selector-popover-open |
| Selectors Level 4 # selectordef-popover-open |
Tương thích trình duyệt
Xem thêm
- Popover API
popoverHTML global attribute