Onhover Effect With Inline CSS

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

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.

You can do the same thing using the inline hover selector method.

Index

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:

hover css inline - output1

After:
hover css inline - output2

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:

hover css inline - output3

After:

hover css inline - output4

Explanation:

  • First, we set the style property of 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 color of text 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 🙂

Leave a Reply

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

More in CSS, How To
str to int in php
How to Convert Str to Int in PHP

Sometimes you require to convert the string into the number like int, float, or any other type. It is needed...

Close