How to change the text on Hover?

To learn how to create the text change on hover using HTML and CSS follow the steps below and watch the video tutorial:

Demo (hover over the text):

Some text…

Step1.

Add HTML

<div class="example"><span>Some text...</span></div>

Step2.

Add CSS

.example:hover:before {
  content:"Text changed!";
}

.example:hover span {
  display: none;
}

Enjoy coding!

Watch also the video tutorial:

Hey, here’s something that might interest you: