Change text color on mouse hover – CSS code

By Faruque Ahamed Mollick

You will find on many web pages on some of the websites that whenever you hover your mouse cursor, the text color change. In this CSS tutorial, I am going to show you how to change the text color of text on mouse hover using CSS code.

CSS Hover Animation Effects – CSS3 Transitions

The CSS code

Suppose you have text inside paragraph element like below:

<p> The color of this text will be changed on mouse hover</p>

Below is the given CSS code which will change the color of the above text between <p> tag:

p:hover {
  color: red;
}

You can apply the above CSS code to any div element if you want to change the color of the texts inside that div element. Also, you can choose any color or color code that you want.



CSS Code To Make An Element Transparent

That’s all you need to do this task. Now test it on your browser. Whenever you keep your mouse cursor on text, you will able to see the text color become red.

In this simple CSS tutorial, we have used CSS hover selector to apply the CSS on hover. not only color, you can apply any CSS that you would like to change on hover. Here are some of the tutorials from this site which is related to CSS hover selector:

CSS cursor Property to change cursor type on mouse hover

CSS code snippet to shake div element on mouse hover

CSS Hover Animation Effects – CSS3 Transitions

Leave a Reply

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