如何僅使用 CSS 動態變更懸停時的內容？

如何使用CSS 更改懸停時的內容

要僅使用CSS 更改懸停時的內容，您可以使用content 屬性以及::after 或::before 偽元素。

在提供的範例中，目標是當元素懸停在上方時將文字「NEW」變更為「ADD」。要達到此目的，請加入以下 CSS：

<code class="css">.item:hover a p.new-label:after {
    content: 'ADD';
}</code>

說明：

• .item:hover：觸發 item 元素上的懸停效果。
• a p.new-label：選擇錨標記內帶有類別 new-label 的段落。
• :after：建立一個偽元素，該元素將在其附加的元素之後顯示內容to.
• content: 'ADD': 定義偽元素後面顯示的內容。

當 item 停留在上面時，觸發 :after 偽元素，內容變更為「ADD」。原始的「NEW」文字使用另一個 CSS 規則隱藏：

<code class="css">.item:hover a p.new-label span {
    display: none;
}</code>

這種方法允許您使用 CSS 動態更改懸停時元素的內容，而無需依賴 JavaScript。

以上是如何僅使用 CSS 動態變更懸停時的內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！