How to change text color on hover

By | November 6, 2015

A simple beginner’s tip today – changing text color on hover. Experts would think it is so silly to explain such basics. Just count it was inspired from tutorials like this one explaining there is no HTML text color tag.

Now, to the tutorial:

Use the CSS :hover selector. When the mouse is over the text, the style used in the CSS :hover selector is applied.

Example:

Then in HTML

This will change the text color of the highlighted area when mouse is moved on top of it.

However, since this highlighting is common for ‘clickable’ elements, it will only be right if you applied such hover effect only for a clickable element like a link or a button.

On hover text color for links

The CSS code below highlights hyper links in the page on hover and changes text color to red.

Learn More:

Leave a Reply

Your email address will not be published. Required fields are marked *