7

Muitas vezes preciso desenvolver templates para envio de e-mails. Porém em alguns casos utilizar a tag style para fazer as definições de estilo não funciona. Assim, é necessário definir os valores estilos para os elementos inline.

Para quem não entende o que é "inline", seria assim:

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

Sendo assim, se eu precisasse então de fazer um hover, que geralmente é feito pela tag style ou por um documento css externo, haveria alguma forma de fazê-lo inline?

Sei que é possível fazer com Javascript, mas provavelmente também seria bloqueado pelo e-mail.

Existe então alguma maneira de definir um hover, active, visited e etc via definição de estilo inline?

1
  • 1
    Eu queria responder apenas não, mas o site não permite. :p
    – Randrade
    29/06/2016 às 17:38

2 Respostas 2

18

Em uma resposta curta, não tem como.

Em uma resposta longa, você não deve.

:hover é um pseudo-seletor e, por CSS, só tem sentido dentro da folha de estilo. Não há qualquer equivalente de estilo inline (uma vez que não está definindo os critérios de seleção).

Tradução desta resposta.

Vale ressaltar que isso era possível no passado!

Porém, se você deseja fazer algo parecido, pode usar o onMouseOver e o onMouseOut.

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

Sua pergunta indica que essa opção é para envio de e-mails, ou seja, para adicionar isso em um template que será enviado para um e-mail.

Alguns servidores de e-mails aceitam o :hover na folha de estilo, sem ser inline, como você pode ver como o Gmail. Porém, isso não é padrão em todos.

1
3

Não é possível definir regras de pseudo-classes em css inline. CSS inline pode conter apenas declarações de propriedades. Contudo, no caso específico do hover, você pode utilizar algo semelhante à:

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

Referência

Css pseudo-classes with inline style

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .