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

如何更改懸停時的內容

簡介

懸停效果是一種常用技術，用於提供附加資訊或引起對元素的注意網頁。本文探討了一種簡單而有效的方法，僅使用 CSS 即可在滑鼠遊標懸停在元素上時更改元素的內容。

問題陳述

目標是更改「的內容」當滑鼠遊標停留在「NEW」標籤上時，標籤會變成「ADD」。這應該純粹透過 CSS 來實現，而不使用 JavaScript 或任何其他函式庫。

CSS 內容屬性來救援

CSS 內容屬性，與 ::after 和 ::before 偽類一起引入elements，提供了一種修改元素內容的方法。讓我們利用這個屬性來解決我們的問題：

解決方案

1. 隱藏滑鼠懸停時的原始內容：

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

此規則使用顯示：沒有隱藏 的屬性當滑鼠遊標停留在.item 上時包含「NEW」內容的元素。

2. 使用::after:

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

偽- element ::after 用於在.new-label 元素處於懸停狀態時在其後面插入「 ADD”內容。 content 屬性指定新內容。

更新了程式碼

<code class="css">body {
  font-family: Arial, Helvetica, sans-serif;
}

.item {
  width: 30px;
}

a {
  text-decoration: none;
}

.label {
  padding: 1px 3px 2px;
  font-size: 9.75px;
  font-weight: bold;
  color: #ffffff;
  text-transform: uppercase;
  white-space: nowrap;
  background-color: #bfbfbf;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-decoration: none;
}

.label.success {
  background-color: #46a546;
}

.item a p.new-label span {
  position: relative;
  content: 'NEW';
}

.item:hover a p.new-label span {
  display: none;
}

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

結論

透過將content 屬性與懸停效果結合，我們成功實現了一個簡單而優雅的解決方案使用純CSS更改懸停時的內容。此技術應用廣泛，可用於增強用戶互動並以動態且視覺吸引力的方式提供附加資訊。

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