In CSS, is there any way to define the inline Hover?

Question

I often need to develop templates for sending emails. But in some cases use the tag style to make style settings does not work. Thus, it is necessary to define the style values for inline elements.

For those who do not understand what is "inline", it would be like this:

<div style="background-color: red">
    <h1 style="text-align:left">Olá, mundo</h1>
</div>

So if I needed to make one then hover, which is usually done by tag style or by an external css document, there would be some way to do it inline?

I know it is possible to do with Javascript, but would probably also be blocked by email.

There is then some way to define a hover, active, visited and etc via inline style definition?

Answer 1

In a short answer, there’s no way.

In a long answer, you should not.

:hover is a pseudo-selector and, by CSS, only makes sense inside the stylesheet. There is no inline style equivalent (since it is not setting the selection criteria).

Translation of this answer.

It is noteworthy that this was possible in the past!

However, if you want to do something similar, you can use the onMouseOver and the onMouseOut.

<a
   href="#"
   onMouseOver="this.style.color='#0F0'"
   onMouseOut="this.style.color='#00F'"
>Text</a>

Your question indicates that this option is for sending emails, ie to add this in a template that will be sent to an email.

Some email servers accept the :hover in the style sheet, without being inline, as you can see like Gmail. However, this is not standard at all.

Answer 2

Unable to define pseudo-class rules in inline css. CSS inline can only contain property statements. However, in the specific case of Hover, you can use something similar to:

<a href="#" 
   onmouseover = "this.style.textDecoration = 'none'"
   onmouseout  = "this.style.textDecoration = 'underline'">Olá</a>

Reference

Css pseudo-classes with inline style