如何使用 CSS ::after 偽元素動態更改懸停時的內容？

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

更改懸停時元素的內容是 Web 開發中的常見任務。雖然您可能認為這是一個簡單的過程，但它需要更深入地了解 CSS 內容屬性及其偽元素，例如 ::after 和 ::before。

在您的範例中，目標是變更當滑鼠懸停在「NEW」標籤上時，「ADD」的內容會變成「ADD」。最初，您透過嘗試使用 content 屬性來解決此問題，但遇到了困難。幸運的是，有一個聰明的解決方案可以實現所需的效果。

訣竅在於將content 屬性與::after 偽元素結合：

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

此CSS 規則針對的是p處於懸停狀態時，類別「new-label」的元素位於「item」類別的「a」標籤內。然後，它會動態地將現有內容替換為“ADD”。

為了說明這一點，這裡有一個更新的範例：

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

<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>

現在，當您將滑鼠懸停在「新」標籤上時，它無縫地轉換為“ADD”，滿足您最初的要求。

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