How to Dynamically Change Content on Hover Using Only CSS?

How to Change Content on Hover Using CSS

To change the content on hover using only CSS, you can utilize the content property along with the ::after or ::before pseudo-elements.

In the example provided, the goal is to change the text "NEW" to "ADD" when the element is hovered over. To achieve this, add the following CSS:

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

Explanation:

• .item:hover: Triggers the hover effect on the item element.
• a p.new-label: Selects the paragraph with the class new-label inside the anchor tag.
• :after: Creates a pseudo-element that will display the content after the element it's attached to.
• content: 'ADD': Defines the content to be displayed after the pseudo-element.

When the item is hovered over, the :after pseudo-element is triggered, and the content is changed to "ADD." The original "NEW" text is hidden using another CSS rule:

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

This approach allows you to dynamically change the content of an element on hover using CSS without relying on JavaScript.

The above is the detailed content of How to Dynamically Change Content on Hover Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!