The hover pseudo-selector is typically applied to anchor tags or other elements to create hover effects. However, this is usually done within external or internal CSS. But what if you want to achieve this using inline CSS?
So, in this solution, you will learn how to set the hover effect on any element using inline CSS.
Let's dive in!
In inline CSS, you can create a hover effect by using the onMouseOver and onMouseOut attributes.
- onMouseOver: When the cursor is above the content.
- onMouseOut: When the cursor is moved over the content.
For a few elements, this method can be used to create a hover effect. By the way, it is not inline CSS, but it is inline😅.
The example below👇 demonstrates how to implement an inline hover effect with the <a> tag.
<body>
<a style="color:#000;" href="http://codemafias.com" target="_blank" onmouseover="this.style.color='red'"
onmouseout="this.style.color='#000'"> Hover me!</a>
</body>
The example below👇 demonstrates how to implement an inline hover effect with the <div> tag.
<body>
<div style="padding: 10px; cursor: pointer; display: inline;" onmouseover="this.style.backgroundColor='thistle';"
onmouseout="this.style.backgroundColor='white';">
Hover me!
</div>
</body>
The example below👇 demonstrates how to implement an inline hover effect with the <span> tag.
<body>
<span onMouseOver="this.style.color='red'" onMouseOut="this.style.color='black'">Hover me!</span>
</body>
You can apply a hover effect to any element by utilizing the onMouseOver and onMouseOut parameters within inline CSS.
It's better to avoid using this method when applying lots of hover effects to many elements because it can take a lot of time. However, this method is extremely useful when only a few hover effects have to be given to one or two elements.
If you have any questions about web development, you can ask them in the question box given below, and you will get the answer as soon as possible.