Onhover Effect With Inline CSS and JavaScript

In most of the sites, you have noticed that when you hover the cursor on that text, it changes the text’s color.

Index

Toggle

Hover Effect Using CSS

CSS hover selector is used for making the hover effect on some text or link. It makes the page interactive and user friendly.

This method changes the color of the text when you move the cursor to that particular text.

Syntax

:hover{
CSS Declaration;
}

Example

.heading:hover {
color: red;
}

Explanation

The above method changes the color of the tag having the heading class.

Inline CSS Hover Effect Using JavaScript

In the CSS, there no facility of inline hover effect. However, we can do the same thing using the inline hover selector method.

What is the inline hover selector method?

Inline hover selector is the method used for doing the same thing using the hover selector explained above.

In this method, onMouseOver and onMouseOut attributes are set for generating the hover effect on some text or link.

Read Also: HTML Code to Change Text Color on Mouseover

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;
         color:blue;
         }
      </style>
   </head>
   <body>
      <div class="heading" onMouseOver="this.style.color='red'" onMouseOut="this.style.color='blue'">I am heading!</div>
   </body>
</html>

Output

Before

After

Explanation

First we assign font size and color to <div> tag.
Next, we set a color property of the onMouseOver attribute.
Then, we set the color property of the onMouseOut attribute.

It will change the color of <div> tag from blue to red when you hover the mouse on that text.

You can also write the inline CSS for the hover effect using javascript.
Let’s take one example, which adds the hover effect on a link using javascript.

Example 2

For example, you have a link having some text, and you want to change the text color to ‘red’ using javascript. You can do this by using the following.

<!DOCTYPE html>
<html>
   <head>
      <style>
         #heading{
         font-size:20px;
         color:blue;
         text-decoration:none;
         }
      </style>
   </head>
   <body>
      <a href="https://errorsea.com"id="heading" onMouseOver="hoverin()"onMouseOut="hoverout()"> Welcome to our website Errorsea</a>
      <script>
         function hoverin(){
         var x = document.getElementById("heading");
         x.style.color='red';
         }
         function hoverout(){
         var x = document.getElementById("heading");
         x.style.color='blue';
         }
      </script>
   </body>
</html>

Output

Before

After

Explanation:

First, we set the style property of the link using id heading.
Next we set the hoverin() and hoverout() functions to attributes OnMouseOver and OnMouseOut attribute.
Then, we write the script for both functions.
Here first, we select the <a> tag using its id heading.
Then we set style attributes for changing the color onhover effect.

Conclusion

This is all about changing the text color when we hover on a title or a link using the inline hover CSS method. 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 🙂

Yash Panchal

Computer science student, Working as Web Developer and part-time Blogger. Highly interested in AI & ML.