CSS文字彈窗提示代碼 您是否遇到過需要在網頁中添加文字彈窗提示的情況？這時候，CSS就可以派上用場了。下面，我們來看一下如何使用CSS添加文字彈窗提示。 首先，我們需要在HTML中添加一個按鈕，用于觸發文字彈窗。這里，我們將按鈕設置為紅色背景，白色字體，加粗樣式，如下所示：

點擊彈出提示

接下來，我們需要在CSS中設置文字彈窗的樣式。我們可以定義一個類名popup，用于設置彈窗的樣式。具體代碼如下：

.popup {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 2px 2px 6px #ccc;
z-index: 999;
}

上述代碼中，我們將彈窗的display屬性設置為none，表示一開始彈窗不可見。然后，我們設置彈窗的position屬性為absolute，讓它相對于頁面定位。接著，我們使用translate屬性將彈窗居中顯示。我們為彈窗添加了一些padding來增加視覺效果，并設置了背景色、邊框、陰影等屬性。 在CSS中，我們還需要為按鈕添加一個:hover偽類，用于設定當鼠標懸停在按鈕上時，彈窗的顯示方式。具體代碼如下：

.popup-btn:hover + .popup {
display: block;
}

上述代碼中，我們使用相鄰兄弟選擇器+。表示當按鈕被懸停時，緊隨其后的.popup元素的display屬性設置為block，彈窗顯示出來。 最后，我們將popup類應用到HTML中的彈窗元素上，以顯示文字彈窗。具體代碼如下：

點擊彈出提示

上述代碼中，我們將popup類應用于