How to add inline styles that act as hover in JavaScript?

Spread the love

Sometimes, we want to add inline styles that act as hover in JavaScript.

In this article, we’ll look at how to add inline styles that act as hover in JavaScript.

To add inline styles that act as hover in JavaScript, we set the onmouseover and onmouseout attributes.

For instance, we write

<a href="#" onmouseover="overStyle(this)" onmouseout="outStyle(this)">
  My Link
</a>

to add a link.

We set onmouseover to call the overStyle function with the current element.

We set onmouseout to call the outStyle function with the current element.

Then we write

function overStyle(object) {
  object.style.color = "orange";
}

function outStyle(object) {
  object.style.color = "orange";
  //...
}

to define the 2 functions to set the color style for the object element.

To add inline styles that act as hover in JavaScript, we set the onmouseover and onmouseout attributes.