Estilo inline para agir como: passar o mouse em CSS

97

Eu sei que incorporar estilos CSS diretamente nas tags HTML que eles afetam anula muito do propósito do CSS, mas às vezes é útil para fins de depuração, como em:

<p style="font-size: 24px">asdf</p>

Qual é a sintaxe para incorporar uma regra como:

a:hover {text-decoration: underline;}

no atributo de estilo de uma tag A? Obviamente não é isso ...

<a href="foo" style="text-decoration: underline">bar</a>

... já que isso se aplicaria o tempo todo, ao contrário de apenas durante o foco.

html css

— Raldi
fonte

Teoricamente, se você está tentando tornar o foco em algo dinâmico, pode usar javascript para injetar uma regra de foco em uma folha de estilo usando a lista window.document.styleSheets de folhas existentes.

— GAgnew

Consulte também stackoverflow.com/questions/5293280/…

— rogerdpack

98

Infelizmente, isso não pode ser feito, os seletores de pseudo-classe não podem ser configurados em linha, você terá que fazer isso na página ou em uma folha de estilo.

Devo mencionar que, tecnicamente, você deve ser capaz de fazer isso de acordo com as especificações CSS , mas a maioria dos navegadores não oferece suporte

Edit: Acabei de fazer um teste rápido com isso:

<a href="test.html" style="{color: blue; background: white} 
            :visited {color: green}
            :hover {background: yellow}
            :visited:hover {color: purple}">Test</a>

E não funciona no IE7, IE8 beta 2, Firefox ou Chrome. Alguém mais pode testar em qualquer outro navegador?

— Glenn Slaven
fonte

3

Esse é um rascunho de trabalho do CSS 3 de prioridade muito baixa que não é atualizado há seis anos. Das especificações: 'Não é apropriado usar rascunhos de trabalho do W3C como material de referência ou citá-los como algo diferente de "trabalho em andamento". '

— Jim,

1

É verdade, mas os navegadores implementam algumas regras CSS3, deveria ser provavelmente a palavra errada neste contexto

— Glenn Slaven

Os navegadores geralmente implementam recursos CSS que estão em um estado de desenvolvimento posterior, por exemplo, a opacidade é da cor CSS (última chamada) e as consultas de mídia são uma recomendação candidata.

— Jim

Style = ": hover {}" não seria equivalente a "a {: hover {}}" na folha de estilo? Isso obviamente é um erro de sintaxe.

— Kornel

33

Esta resposta foi postada muito tempo atrás, as coisas mudaram desde então e a versão atual da especificação W3C relevante - CSS Style Attribute Rec. ( w3.org/TR/css-style-attr/#syntax ) - diz claramente que o atributo de estilo pode conter apenas o conteúdo de um bloco de declaração CSS. Portanto, agora é impossível inserir pseudoelementos com styleatributo.

— Ilya Streltsyn

24

Se estiver apenas depurando, você pode usar javascript para modificar o css:

<a onmouseover="this.style.textDecoration='underline';" 
    onmouseout="this.style.textDecoration='none';">bar</a>

— Aleksi Yrttiaho
fonte

1

Procurei uma solução com JSF e isso me ajudou a consertar. onmousemove = "this.style.color = '## {cc.attrs.color}';" onmouseout = "this.style.color = 'white';"

— kdoteu

17

Uma solução simples:

   <a href="#" onmouseover="this.style.color='orange';" onmouseout="this.style.color='';">My Link</a>

Ou

<script>
 /** Change the style **/
 function overStyle(object){
    object.style.color = 'orange';
    // Change some other properties ...
 }

 /** Restores the style **/
 function outStyle(object){
    object.style.color = 'orange';
    // Restore the rest ...
 }
</script>

<a href="#" onmouseover="overStyle(this)" onmouseout="outStyle(this)">My Link</a>

— Roberto
fonte

16

Se for para depuração, basta adicionar uma classe css para pairar (já que os elementos podem ter mais de uma classe):

a.hovertest:hover
{
text-decoration:underline;
}

<a href="http://example.com" class="foo bar hovertest">blah</a>

— Rodrick Chapman
fonte

2

Este é provavelmente o mais próximo que você vai chegar do efeito desejado

— Glenn Slaven

1

Eu criei uma solução rápida para quem deseja criar pop-ups hover sem CSS usando os comportamentos onmouseover e onmouseout.

http://jsfiddle.net/Lk9w1mkv/

<div style="position:relative;width:100px;background:#ddffdd;overflow:hidden;" onmouseover="this.style.overflow='';" onmouseout="this.style.overflow='hidden';">first hover<div style="width:100px;position:absolute;top:5px;left:110px;background:white;border:1px solid gray;">stuff inside</div></div>

— Josh Kernich
fonte

0

Se essa <p>tag for criada a partir de JavaScript, então você tem outra opção: usar JSS para inserir planilhas de estilo programaticamente no cabeçalho do documento. Suporta '&:hover'. https://cssinjs.org/

— Michielbdejong
fonte

-2

Eu não acho que o jQuery suporta os pseudo-seletores, mas fornece uma maneira rápida de adicionar eventos a um, muitos ou todos os seus controles e tags semelhantes em uma única página.

O melhor de tudo é que você pode encadear os vínculos de eventos e fazer tudo em uma linha de script, se desejar. Muito mais fácil do que editar manualmente todo o HTML para ativá-los ou desativá-los. Então, novamente, uma vez que você pode fazer o mesmo em CSS, não sei se isso te compra alguma coisa (além de aprender jQuery).

— CMPalmer
fonte