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
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
- 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.
Read Also: How to Open a New Web Page On Button Click Using JavaScript
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 a webpage interactive and user friendly.
I hope you found this post fully informative and helpful.
Thank you for reading 🙂
