Categories
Web development

How to change the text on Hover?

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:

CSS :hover and :active selectors

CSS Text Change on Hover

CSS Mirror/ Reflection Text Effect