CSS 可以實(shí)現(xiàn)很多與頁面視覺相關(guān)的效果，其中之一就是彈出小窗口。這一功能在一些需要彈出信息的場景下非常實(shí)用。

在實(shí)現(xiàn)這一功能之前，我們需要先對(duì) HTML 結(jié)構(gòu)進(jìn)行一定的修改。具體來說，我們需要添加一個(gè)用于彈出的小窗口，同時(shí)在頁面的某個(gè)元素上添加data-popup屬性，用于觸發(fā)彈出事件。

<div class="popup">
<p>這是一個(gè)彈出窗口</p>
</div>
<button data-popup="popup">打開窗口</button>

接下來是 CSS 的部分。我們需要為彈出窗口和觸發(fā)彈出事件的元素分別設(shè)置對(duì)應(yīng)的樣式。

/* 彈出窗口的樣式 */
.popup {
display: none; /* 初始不顯示 */
position: fixed; /* 固定位置 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 居中顯示 */
background-color: white;
border: 1px solid #ccc;
padding: 10px;
}
/* 觸發(fā)彈出事件的元素的樣式 */
[data-popup] {
cursor: pointer;
}
/* 點(diǎn)擊元素后顯示彈出窗口 */
[data-popup]:hover ~ .popup,
[data-popup]:focus ~ .popup {
display: block;
}

通過給小窗口和觸發(fā)元素設(shè)置相應(yīng)的 CSS 樣式，我們就可以實(shí)現(xiàn)一個(gè)簡單易用的彈出窗口功能。