如何使用 CSS ::after 伪元素动态更改悬停时的内容？-css教程-PHP中文网

如何使用 CSS ::after 伪元素动态更改悬停时的内容？

Patricia Arquette

发布： 2024-10-30 00:43:02

原创

405 人浏览过

How to Dynamically Change Content on Hover Using CSS ::after Pseudo-element?

如何使用 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中文网其他相关文章！