In CSS, is there any way to set the hover inline?

Question

In CSS, is there any way to set the hover inline?

Navigation

#1 by (8 votes)
#2 by (2 votes)

4

I often need to develop templates for sending emails. However in some cases using the style tag to make the style definitions does not work. Thus, you need to set the style values for the inline elements.

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

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

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

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

Is there any way to set hover , active , visited and etc via inline style definition?

css email

asked by anonymous 29.06.2016 / 14:16

2 answers

Use CONCAT to adjust the amount of php mysql numbers Add date with int

score 8 · Answer 1

In a short answer, has no way .

In a long answer, you should not .

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

translation

Note that this was possible in the past!

However, if you want to do something similar, you can use onMouseOver and 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, that is, to add this in a template that will be sent to an email.

Some e-mail servers accept :hover in the style sheet, not inline, as you can see like Gmail.

However, this is not standard at all.

score 2 · Answer 2

Unable to set pseudo-class rules in inline css . CSS inline can only contain property declarations. 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