HTML Code to Change Text Color on Mouseover

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

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 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 colour 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:

Change Text Color on Mouseover - step1

After:

Change Text Color on Mouseover - step2

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 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.

For doing this 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:

Change Text Color on Mouseover - step3

On hover:

Change Text Color on Mouseover - step4

On click:

Change Text Color on Mouseover - step5

Explanation:

  • First, the link color is yellow.
  • When we hover on the link, it changes the color to red.
  • When we click, it changes the color to blue and then opens the link.

Conclusion

This is all about changing the color of text when we hover on a title or a link. This method is used to make webpage interactive and user friendly.

I hope you found this post fully informative and helpful.

Thank you for reading πŸ™‚

Leave a Reply

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

More in How To
javascript check undefined or null
How to Check the Variable of Type Undefined or Null in JavaScript

In JavaScript, variables are of different types such as Boolean Undefined Null Number String Object Array, etc. You can declare...

Close