如何使用 CSS 動態變更懸停時的內容，為使用者創建互動式體驗？

使用 CSS 更改懸停時的內容

在當今的 Web 開發中，內容元素的動態變更增加了互動性和吸引力。常見的要求是在懸停時更新元素的內容。雖然這看起來微不足道，但 CSS 提供了一個優雅的解決方案。

使用 CSS 內容屬性

CSS 內容屬性與 ::after 和 ::before 偽元素結合使用，為開發人員提供了幫助來修改顯示的內容。透過利用這些元素，我們可以創建一個無縫的懸停效果，以更改目標元素的內容。

修改懸停狀態的CSS 規則

為了實現所需的懸停效果，我們添加以下內容我們的CSS 規則：

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

此規則指示瀏覽器在進入懸停狀態時將“ADD”附加到類別“new-label”的元素的內容中。

範例實作

考慮以下範例：

<code class="html"><div class="item">
  <a href="">
    <p class="label success new-label"><span>New</span></p>
  </a>
</div></code>

<code class="css">.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>

將滑鼠懸停在「NEW」標籤上時，內容無縫過渡到「ADD」 ，從而創建動態懸停狀態，而無需需要額外的腳本。

以上是如何使用 CSS 動態變更懸停時的內容，為使用者創建互動式體驗？的詳細內容。更多資訊請關注PHP中文網其他相關文章！