How to change text color on hover

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:

.highlight{
   color:#111;
}

.highlight:hover{
   color:blue;
}

Then in HTML

Some text <span class="highlight">highlighted</a> here and some more text here.

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.

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

a:hover{
font-size:1.2em;
color:red;
}

Learn More:

Contents