How do you code a hover effect with inline CSS?

Sometimes you’re forced to write inline CSS, e.g. in HTML email templates — depending on your email/newsletter provider.

But how do you get a hover effect with inline CSS?

You can’t, but you can create get the same hover effect by using JavaScript’s onMouseOver and onMouseOut method.

Let’s say you want to change the color of a hyperlink on hover (or mouseover) from blue to red:

<a href="#your-url-path"
onMouseOver="this.style.color='red'"
onMouseOut="this.style.color='green'" >Click here to Subscribe</a>

The result:

Click here to Subscribe

In general, inline CSS is not ideal, but sometimes you’re forced to use less than ideal code to get things done.