1017

Tenho um caso em que devo escrever código CSS embutido e quero aplicar um estilo de foco instantâneo em uma âncora.

Como posso usar a:hoverCSS embutido dentro do atributo de estilo HTML?

Por exemplo, você não pode usar classes CSS de maneira confiável em emails em HTML.

html css inline-styles Amr Elgarhy
fonte

24

A incorporação de html em aplicativos de blog também geralmente exige o uso exclusivo de estilos embutidos. Especialmente se você estiver incorporando o html através de um cliente de terceiros e não tiver acesso aos temas do usuário.

Providence

8

Existe um padrão CSS proposto para isso; não faço idéia de que tipo de suporte de navegador ele pode ter (dica: eles podem estar usando as tags personalizadas, como -moz, etc): w3.org/TR/2002/WD-css-style-attr-20020515

Kato

1

possível duplicação de É possível criar pseudo-estilos embutidos?

21312 Synetech

17

Oh vamos lá. Às vezes, você está apenas criando um protótipo da página de destino e não precisa ter que dividir as folhas de estilo ou criar uma nova ramificação de modelo ou o que quer que seja, apenas para testar se o botão verde funciona melhor. Sheesh.

22813 ElBel

1

@FriendlyNeighborhoodIdiot Esta página tem 13 anos, o rascunho foi abandonado desde então.

Tofandel

573

Resposta curta: você não pode.

Resposta longa: você não deveria.

Atribua a ela um nome ou ID de classe e use folhas de estilo para aplicar o estilo.

:hoveré um pseudo-seletor e, para CSS , só tem significado na folha de estilos. Não há nenhum equivalente no estilo embutido (pois não está definindo os critérios de seleção).

Resposta aos comentários do OP:

Consulte Totally Pwn CSS with Javascript para obter um bom script sobre como adicionar regras CSS dinamicamente. Consulte também Alterar folha de estilo para algumas das teorias sobre o assunto.

Além disso, não se esqueça, você pode adicionar links a folhas de estilo externas, se for uma opção. Por exemplo,

<script type="text/javascript">
  var link = document.createElement("link");
  link.setAttribute("rel","stylesheet");
  link.setAttribute("href","http://wherever.com/yourstylesheet.css");
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(link);
</script>

Cuidado: o acima pressupõe que há uma seção principal .

Jonathan Fingland
fonte

4

você pode adicionar classes css em javascript

Jonathan Fingland

204

Há outras circunstâncias em que o CSS embutido é a única opção - como emails em HTML (por exemplo, o Gmail ignora o CSS, a menos que esteja embutido). Infelizmente, com o Javascript retirado da maioria dos clientes de email, ainda não encontrei uma maneira de adicionar: efeitos de foco.

Simon East

24

@ Kato, embora esse seja um ótimo link, e eu realmente gostaria que funcionasse, infelizmente não. Só para confirmar, testei usando a sintaxe style="{color:green;} :hover { color: red; }"e o firefox conseguiu colorir o link de verde, mas ignorou o foco. O Chrome ignorou os dois. Testes contínuos seriam inúteis.

Jonathan Fingland 04/10

9

Eu não o afirmei como uma solução funcional. Afirmei que não era "totalmente" correto dizer que não há equivalente em linha e que pseudo-seletores não têm significado fora das folhas de estilo. Como isso é inapropriado?

Kato

5

Por que a resposta longa é Você não deveria ... você ... não deveria generalizar. Eu estava tentando enviar mensagens de email com html, mas adivinhe ... o gmail remove todas as marcas de estilo, todas as referências externas e todos os scripts. Então ... existe alguma maneira de estilizar a cor flutuante dos links nos emails enviados para o gmail? Espero que sim ... a esperança é a última a morrer !!! =)

Miguel Angelo

435

Você pode obter o mesmo efeito alterando seus estilos com JavaScript nos parâmetros onMouseOvere onMouseOut, embora seja extremamente ineficiente se precisar alterar mais de um elemento:

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

Expandir snippet

Além disso, não me lembro com certeza se thisfunciona neste contexto. Você pode ter que trocá-lo com document.getElementById('idForLink').

Alex S
fonte

12

isso é esperto! Obras para um efeito hover cor de fundo, bem<div onMouseOver="this.style.backgroundColor='#F8F8F8'" onMouseOut="this.style.backgroundColor='#FFFFFF'"> ...

mxro

46

Tem que rir disso sendo visto como 'inteligente' :) É difícil imaginar que algumas pessoas não estavam por perto quando essa era a única maneira proeminente e em que você poderia alcançar esse efeito. Ou pior ainda, ter uma 'imagem' e ter que trocar a imagem, apenas para dar o efeito 'pairar'. Faz-me sentir velho! Mas basta dizer, ele faz responder à pergunta do OP :)

Manachi

5

Eu tenho que concordar com Manachi neste. Isso é como um flashback das geocidades dos anos 90 javascript; P

Eric Castro

9

Velho, novo, antigo ou à frente. Ele respondeu à pergunta e me ajudou. Obrigado, Peter.

User2060451

4

Eu precisava fazer isso por um email e funcionou. Obrigado! Isso realmente resolve a questão, diferentemente da resposta aceita.

theUtherSide

53

Você poderia fazer isso em algum momento no passado. Mas agora (de acordo com a revisão mais recente do mesmo padrão, que é Recomendação do Candidato), você não pode.

fuddin
fonte

3

todas as outras respostas disseram que não é possível, mas as suas mostram que é possível, sua resposta é diferente, estou testando.

Amr Elgarhy 27/03/12

2

Desculpe, acabei de verificar a data do artigo. Tem 10 anos. Portanto, não há garantia de que funcione. Se isso acontecer, por favor, me diga também.

27612 fuddin

2

Eu testei este:

<a href="http://www.w3.org/"           style="{color: #900}           :link {background: #ff0}           :visited {background: #fff}           :hover {outline: thin red solid}           :active {background: #00f}">...</a>

Mas isso não funcionou

Amr Elgarhy

5

No caso de alguém se depara com esta resposta, o respondente postei uma pergunta sobre esse recurso aqui: stackoverflow.com/questions/9884182/...

BoltClock

9

Mais preciso dizer, você poderia fazê-lo em algum momento no passado. Mas agora (de acordo com a revisão mais recente do mesmo padrão, que é Recomendação do Candidato), você não pode .

Ilya Streltsyn

34

Estou extremamente atrasado contribuindo para isso, no entanto, fiquei triste ao ver que ninguém sugeriu isso, se você realmente precisar de código embutido, isso é possível. Eu precisava disso para alguns botões de foco, o método é o seguinte:

.hover-item {
	background-color: #FFF;
}

.hover-item:hover {
	background-color: inherit;
}

<a style="background-color: red;">
	<div class="hover-item">
		Content
	</div>
</a

Expandir snippet

Nesse caso, o código embutido: "background-color: red;" é a cor do interruptor, passe a cor que você precisa para lá e, em seguida, esta solução funciona. Sei que essa pode não ser a solução perfeita em termos de compatibilidade, mas isso funciona se for absolutamente necessário.

lukesrw
fonte

4

Obrigado. Essa é uma ótima resposta, acho que essa resposta deve ser a solução.

Hovhannes Sargsyan

64

Não, a OP disse que queria o CSS embutido dentro do atributo de estilo HTML .

jj_

3

Eu sei, jj_- no entanto, esse método permite que você coloque apenas algumas linhas no CSS e o use repetidamente em muitos lugares, muitas pessoas (inclusive eu) descobriram que essa é uma alternativa útil.

lukesrw

2

essa deve ser a resposta real, com uma pequena modificação: não defina nenhuma das cores no estilo, apenas a regra a herdar do pai quando pairar o mouse e defina as duas cores na linha.

Hayko Koryun

4

Esta é apenas a maneira "normal" de fazê-lo, que todo mundo estava dizendo que é o caminho certo. No entanto, não é uma maneira inline, que foi a solicitação original do OP.

Wcndave #

31

Você não pode fazer exatamente o que está descrevendo, pois a:hoverfaz parte do seletor, não as regras CSS. Uma folha de estilo possui dois componentes:

selector {rules}

Os estilos embutidos têm apenas regras; o seletor está implícito como o elemento atual.

O seletor é uma linguagem expressiva que descreve um conjunto de critérios para corresponder aos elementos em um documento semelhante ao XML.

No entanto, você pode se aproximar, porque styletecnicamente um conjunto pode ir quase a qualquer lugar:

<html>
  <style>
    #uniqueid:hover {do:something;}
  </style>
  <a id="uniqueid">hello</a>
</html>

Rex M
fonte

3

Na verdade, você não pode: "O HTML permite qualquer número de elementos STYLE na seção HEAD de um documento". ( w3.org/TR/html4/present/styles.html#edef-STYLE )

Éric Araujo

2

Funciona na minha máquina. Obrigado!

Josh Habdas

@ ÉricAraujo: Em seguida, enrole tudo isso conteúdo sob uma <html> </html>tag

fuddin

30

usando Javascript:

a) Adicionando estilo embutido

document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');

b) ou um método um pouco mais difícil - adicionar "mouseover"

document.getElementById("mydiv").onmouseover= function(e){this.className += ' my-special-class'; };
document.getElementById("mydiv").onmouseleave= function(e){this.className = this.className.replace('my-special-class',''); };

Nota: os estilos de várias palavras (ie font-size) em Javascript são escritos juntos :

element.style.fontSize="12px"

T.Todua
fonte

3

Desde esta resposta foi editado para baixo, ele agora parece ser completamente irrelevante para a pergunta original ...

Bill

1

Uau, isso é pensar fora da caixa ... eu adoro!

theglossy1

14

Este é o melhor exemplo de código:

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 onmouseover="this.style.color='#0F0'"
 onmouseout="this.style.color='#00F'">
   Library
</a>

Expandir snippet

Sugestão do moderador: Mantenha sua separação de preocupações.

HTML

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 class="lib-link">
   Library
</a>

Expandir snippet

JS

const libLink = document.getElementsByClassName("lib-link")[0];
// The array 0 assumes there is only one of these links,
// you would have to loop or use event delegation for multiples
// but we won't go into that here
libLink.onmouseover = function () {
  this.style.color='#0F0'
}
libLink.onmouseout = function () {
  this.style.color='#00F'
}

Expandir snippet

user1476842
fonte

10

Declarações de pseudo-classe inline não são suportadas na iteração atual do CSS (embora, pelo que entendi, possa vir em uma versão futura).

Por enquanto, sua melhor aposta provavelmente é apenas definir um bloco de estilo diretamente acima do link que você deseja estilizar:

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>

inkedmn
fonte

4

Felizmente, essa ideia será abandonada. (Veja lists.w3.org/Archives/Public/www-style/2009Jun/0341.html , em "Rascunhos de trabalho abandonados".) #

Ms2ger 23/06/2009

3

Existe um . faltando nesta resposta.

Joel

9

Conforme indicado, você não pode definir estilos inline arbitrários para pairar, mas pode alterar o estilo do cursor em CSS usando o seguinte na tag apropriada:

style="cursor: pointer;"

Rutherford
fonte

2

essa deve ser a melhor resposta

Vladislav Guleaev

6

<style>a:hover { }</style>
<a href="/">Go Home</a>

O foco é uma pseudo classe e, portanto, não pode ser aplicado com um atributo de estilo. Faz parte do seletor.

Joel
fonte

2

@Derek, caso ainda seja interessante / para qualquer pessoa que esteja lendo: "~ /" (barra inclinada para frente) é uma referência do lado do servidor para a raiz do aplicativo nos aplicativos Web asp.net. (A raiz do aplicativo pode ser uma subpasta, é claro). Seu uso aqui não estaria correto, portanto, a razão pela qual a resposta foi editada desde que você fez a pergunta (suspeito).

8402 Chris

5

Você consegue fazer isso. Mas não nos estilos embutidos. Você pode usar onmouseovere onmouseouteventos:

<div style="background: #333; padding: 10px; cursor: pointer"
   onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
      Hover on me!
</div>

Expandir snippet

fonte

4

De acordo com seus comentários, você está enviando um arquivo JavaScript de qualquer maneira. Faça a substituição em JavaScript. O método do jQuery$.hover() facilita, assim como qualquer outro wrapper JavaScript. Também não é muito difícil no JavaScript direto.

Vineel Shah
fonte

Embora este seja um em torno do trabalho mas costuras uma resposta muito boa para mim e para a melhor resposta se realmente não é possível escrever em linha pairar

Amr Elgarhy

4

Não há como fazer isso. Suas opções são usar um bloco JavaScript ou CSS.

Talvez haja alguma biblioteca JavaScript que converta um atributo de estilo proprietário em um bloco de estilo. Mas o código não será compatível com os padrões.

m_vitaly
fonte

2

Acabei de descobrir uma solução diferente.

Meu problema: tenho uma <a>tag em torno de alguns slides / visualizador de conteúdo principal, além de <a>tags no rodapé. Quero que eles vão para o mesmo local no IE, para que todo o parágrafo seja sublinhado onHover, mesmo que não sejam links: o slide como um todo é um link. O IE não sabe a diferença. Também tenho alguns links reais no rodapé que precisam de sublinhado e mudança de cor onHover. Eu pensei que teria que colocar os estilos alinhados com as tags de rodapé para mudar a cor, mas os conselhos de cima sugerem que isso é impossível.

Solução: dei aos links do rodapé duas classes diferentes e meu problema foi resolvido. Consegui onHovermudar a cor em uma classe, os slides onHovernão têm alteração / sublinhado e ainda consegui ter o HREFS externo no rodapé e os slides ao mesmo tempo!

Liz
fonte

1

Eu concordo com a sombra . Você pode usar o evento onmouseovere onmouseoutpara alterar o CSS via JavaScript.

E não diga que as pessoas precisam ter o JavaScript ativado. É apenas uma questão de estilo, portanto, não importa se há alguns visitantes sem JavaScript;) Embora a maioria da Web 2.0 funcione com JavaScript. Veja o Facebook, por exemplo (muito JavaScript) ou o Myspace .

Jaysn
fonte

0

Isso é bastante tarde no jogo, mas quando você usaria JavaScript em um email em HTML? Por exemplo, na empresa em que trabalho atualmente (rima com Abodee), usamos o menor denominador comum para a maioria das campanhas de email marketing - e o JavaScript não está sendo usado. Sempre. A menos que você esteja se referindo a algum tipo de pré-processamento.

Como mencionado em uma publicação relacionada: "Lotus Notes, Mozilla Thunderbird, Outlook Express e Windows Live Mail parecem suportar algum tipo de execução de JavaScript. Nada mais faz."

Link para o artigo do qual isso foi retirado: [ http://en.wikipedia.org/wiki/Comparison_of_e-mail_clients]

Além disso, como passar o mouse seria traduzido para dispositivos móveis? É por isso que eu gosto da resposta de cima:Long answer: you shouldn't.

Se alguém tiver mais informações sobre esse assunto, sinta-se à vontade para me corrigir. Obrigado.

Shawn Spencer
fonte

0

Portanto, isso não é exatamente o que o usuário estava procurando, mas eu encontrei essa pergunta procurando uma resposta e surgiu algo relacionado. Eu tinha vários elementos repetidos que precisavam de uma nova cor / foco para uma guia dentro deles. Uso o guidão, que é a chave da minha solução, mas outras linguagens de modelagem também podem funcionar.

Eu defini algumas cores e as passei para o modelo do guidão de cada elemento. Na parte superior do modelo, defini uma tag de estilo e coloquei minha classe personalizada e passe a cor.

<style type="text/css">
    .{{chart.type}}-tab-hover:hover {
        background-color: {{chart.chartPrimaryHighlight}} !important;
    }
</style>

Então eu usei o estilo no modelo:

<span class="financial-aid-details-header-text {{chart.type}}-tab-hover">
   Payouts
</span>

Você pode não precisar do !important

webhound
fonte

0

você pode escrever um código em vários tipos

primeiro eu posso escrever isso

html

<a href="https://www.google.com/" onMouseOver="this.style.color='red'"
        onMouseOut="this.style.color='blue'" class="one">Hello siraj</a>

css

.one{
  text-decoration: none;
}

você pode tentar de outra maneira

html

<a href="https://www.google.com/" class="one">Hello siraj</a>

css

.one{
text-decoration: none;
}

.one:hover{
color:blue;
}

.one:active{
color: red;
}

você também pode tentar pairar no jquery

script java

$(document).ready(function(){
  $("p").hover(function(){
    $(this).css("background-color", "yellow");
    }, function(){
    $(this).css("background-color", "pink");
  });
});

html

<p>Hover the mouse pointer over this paragraph.</p>

Neste código, você tem uma função de três no jquery. Primeiro, você prepara uma função que é a função básica do jquery. Depois, você tem uma função de foco nessa função quando passa o ponteiro para o texto, a cor será alterada e depois a próxima. quando você soltar o ponteiro do texto, ele terá a cor diferente e esta é a terceira função

Siraj Ahmed
fonte

Por favor, evite postar respostas duplicadas

Simas Joneliunas

ok sir simas-joneliunas

Siraj Ahmed

Nenhuma dessas abordagens resolve o problema expresso na pergunta. Você não pode usar JS em nenhum email formatado em HTML, e a outra abordagem sugerida usa classes que são explicitamente descartadas.

Quentin

0

Agora é possível com o Hacss .

Nick Saunders
fonte

-1

Eu tive que evitar o javascript, mas poderia ir com o código do lado do servidor.

então eu criei um ID, criei um bloco de estilo, gerei o link com esse ID. Sim, seu HTML válido.

a {
  text-decoration: none;
  color: blue; 
}

a:hover {
  color: blue;
  font-weight: bold;
}

<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-123"] { color: green;  } 
  a[data-hover="rnd-id-123"]:hover { color: red; }
</style>
<a data-hover="rnd-id-123">some link 1</a>

<br>

<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-456"] { color: purple;  }
  a[data-hover="rnd-id-456"]:hover { color: orange; }
</style>
<a data-hover="rnd-id-456">some link 2</a>

Expandir snippet

BananaAcid
fonte

-2

Você pode usar a pseudo classe a:hoverapenas em folhas de estilos externas. Portanto, recomendo usar uma folha de estilos externa. O código é:

a:hover {color:#FF00FF;}   /* Mouse-over link */

user1466310
fonte

Certamente você não precisa de folhas externas, basta usar a styleetiqueta.

Dmitri Zaitsev

-2

Você pode fazer a identificação adicionando uma classe, mas nunca em linha.

<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>

2 linhas, mas você pode reutilizar a classe em qualquer lugar.

erro
fonte

-3

Meu problema era que eu estou construindo um site que usa muitos ícones de imagem que precisam ser trocados por uma imagem diferente ao passar o mouse (por exemplo, imagens azuladas ficam vermelhas na hora). Eu produzi a seguinte solução para isso:

.container div {
  width: 100px;
  height: 100px;
  background-size: 100px 100px;
}
.container:hover .withoutHover {
  display: none;
}
.container .withHover {
  display: none;
}
.container:hover .withHover {
  display: block;
}

<p>Hover the image to see it switch with the other. Note that I deliberately used inline CSS because I decided it was the easiest and clearest solution for my problem that uses more of these image pairs (with different URL's).
</p>
<div class=container>
<div class=withHover style="background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQrqRsWFJ3492s0t0NmPEcpTQYTqNnH188R606cLOHm8H2pUGlH')"></div>
<div class=withoutHover style="background-image: url('http://i.telegraph.co.uk/multimedia/archive/03523/Cat-Photo-Bombs-fa_3523609b.jpg')"></div>
</div>

Eu introduzi um contêiner contendo o par de imagens. O primeiro é visível e o outro está oculto (visor: nenhum). Ao passar o mouse pelo contêiner, o primeiro fica oculto (exibição: nenhuma) e o segundo aparece novamente (exibição: bloco).

Jochem Geussens
fonte

Como escrever um: hover em CSS embutido?

Respostas:

usando Javascript: