How to Change Content on Hover Using Only CSS?

How to Change Content on Hover

Introduction

Hover effects are a common technique used to provide additional information or call attention to an element on a web page. This article explores a simple yet effective method to change the content of an element when the mouse cursor hovers over it using only CSS.

Problem Statement

The goal is to change the content of the "NEW" label to "ADD" when the mouse cursor hovers over it. This should be achieved purely through CSS without using JavaScript or any additional libraries.

CSS Content Property to the Rescue

The CSS content property, introduced along with ::after and ::before pseudo-elements, provides a way to modify the content of an element. Let's utilize this property to solve our problem:

Solution

1. Hide the original content on hover:

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

This rule uses the display: none property to hide the element containing the "NEW" content when the mouse cursor hovers over the .item.

2. Display the new content using ::after:

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

The pseudo-element ::after is used to insert the "ADD" content after the .new-label element when it is in a hover state. The content property specifies the new content.

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

Conclusion

By combining the content property with hover effects, we have successfully implemented a simple and elegant solution to change content on hover using pure CSS. This technique is widely applicable and can be used to enhance user interactions and provide additional information in a dynamic and visually appealing manner.

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