How To

HTML Code to Change Text Color on Mouseover

As a regular user, you have noticed on most websites that when you click on some text or link, it changes the text’s color or link on mouseover. When you visit that link page and come back, it may also have changed the link’s color.

Index

Toggle

Change Text Color on Mouseover

This method is used to make the pages interactive and user friendly. It reminds the user that the user has visited the link.

This method is to highlight the title of the text. When the user hovers the cursor on that text, it changes the color of the text.

This method is also used to indicate to the user that this is not a regular text, and it is a link to some other page. When the user hovers the cursor on that text, it changes the color of the text.

CSS hover selector method is used for changing the color of the text when you move the cursor on that particular text.

Syntax

:hover{
CSS Declaration;
}

Note: The above syntax is used with class or id name to make a hover effect on that element.

Example 1

For example, you have a <div> tag having some text, and you want to change the text color to red. You can do this by using the following code:

<!DOCTYPE html>
<html>
<head>
<style>
.heading{
font-size:20px;
}
.heading:hover {
color: red;
}
</style>
</head>
<body>

<div class="heading">I am heading!</div>

</body>
</html>

Output

Before

After

Explanation

First, we write style for heading class.
Next, we write style for heading: hover, class.
Then we add heading class to the <div> tag.

The above method changes the color of the heading to red when you move the cursor to the text.

Example 2

For example, you have created a link; it changes the color when you hover on that link, and it also changes the color when you click on that text.

You have to use :link, :hover, :active, and :visited selectors. You can do this by using the following code.

<!DOCTYPE html>
<html>
<head>
<style>
/* When it is unvisited link */a:link {
color: yellow;
}

/* When it is visited link */a:visited {
color: yellow;
}

/* When you mouse over link */a:hover {
color: red;
}

/* When it is selected link */a:active {
color: blue;
}
</style>
</head>
<body>

<p> Click here to visit our website<p>
<a href="https://www.errorsea.com">errorsea.com</a>

</body>
</html>

Output

Before

On hover

On click

Explanation