CSS hover vs. JavaScript mouseover [fechado]

Há momentos em que posso escolher entre usar um elemento CSS: hover ou JavaScript onmouseover para controlar a aparência dos elementos html em uma página. Considere o seguinte cenário, em que um div envolve uma entrada

<div>
<input id="input">
</div>

Eu quero que a entrada mude a cor de fundo quando o cursor do mouse passar sobre o div. A abordagem CSS é

<style>
  input {background-color:White;}
  div:hover input {background-color:Blue;}
</style>

<div><input></div>

A abordagem do JavaScript é

<div onmouseover="document.getElementById('input').style.backgroundColor='Blue';">
  <input id="input">
</div>

Quais são as vantagens e desvantagens de cada abordagem? A abordagem CSS funciona bem com a maioria dos navegadores da web? JavaScript é mais lento do que css?

O problema com: hover é que o IE6 só o suporta em links. Eu uso jQuery para esse tipo de coisa hoje em dia:

$("div input").hover(function() {
  $(this).addClass("blue");
}, function() {
  $(this).removeClass("blue");
});

Torna as coisas muito mais fáceis. Isso funcionará no IE6, FF, Chrome e Safari.

O CSS é muito mais fácil de manter e legível.

Por que não ambos? Use jQuery para efeitos animados e CSS como substituto. Isso oferece os benefícios do jQuery com degradação elegante .

CSS:

a {color: blue;}
a:hover {color: red;}

jQuery (usa jQueryUI para animar cores):

$('a').hover( 
  function() {
    $(this)
      .css('color','blue')
      .animate({'color': 'red'}, 400);
  },
  function() {
    $(this)
      .animate({'color': 'blue'}, 400);
  }
);

demo

Um benefício adicional de fazer isso em javascript é que você pode adicionar / remover o efeito de foco em diferentes pontos no tempo - por exemplo, passar o mouse sobre as linhas da tabela muda de cor, clicar em desativa o efeito de foco e inicia a edição no modo local.

Uma diferença muito grande é que o estado ": hover" é desativado automaticamente quando o mouse se move para fora do elemento. Como resultado, todos os estilos aplicados ao passar o mouse são automaticamente revertidos. Por outro lado, com a abordagem javascript, você teria que definir os eventos "onmouseover" e "onmouseout". Se você definir apenas "onmouseover", os estilos que são aplicados "onmouseover" irão persistir mesmo depois que você tirar o mouse, a menos que você tenha definido explicitamente "onmouseout".

EDIT: Esta resposta não é mais verdadeira. CSS é bem suportado e Javascript (leia-se: JScript) agora é praticamente necessário para qualquer experiência na web, e poucas pessoas desabilitam o javascript.

A resposta original, conforme minha opinião em 2009.

Em cima da minha cabeça:

Com CSS, você pode ter problemas com o suporte do navegador.

Com JScript, as pessoas podem desabilitar jscript (isso é o que eu faço).

Acredito que o método preferido é fazer conteúdo em HTML, Layout com CSS e qualquer coisa dinâmica em JScript. Portanto, neste caso, você provavelmente desejaria adotar a abordagem CSS.

Há outra diferença a ter em mente entre os dois. Com CSS, o :hoverestado é sempre desativado quando o mouse se move para fora de um elemento. No entanto, com JavaScript, o onmouseoutevento não é disparado quando o mouse se move para fora do elemento para o cromo do navegador, e não para o resto da página.

Isso acontece com mais frequência do que você imagina, especialmente quando você está criando uma barra de navegação na parte superior da página com estados de foco personalizados.

No Internet Explorer, deve ser declarado um <! DOCTYPE> para que o seletor: hover funcione em outros elementos além do elemento <a>.

Use CSS para facilitar o gerenciamento do próprio estilo.

Em relação ao uso do jQuery para pairar , eu sempre uso o plugin HoverIntent, pois ele não dispara o evento até que você pause sobre um elemento por um breve período de tempo ... isso para de disparar muitos eventos do mouse sobre se você executar acidentalmente o mouse sobre eles ou simplesmente ao escolher uma opção.

Se você não precisa de 100% de suporte para IE6 com javascript desabilitado, você pode usar algo como ie7-js com comentários condicionais do IE. Depois, basta usar as regras css para aplicar os efeitos de foco. Não sei exatamente como funciona, mas ele usa javascript para fazer várias regras de css funcionarem que normalmente não funcionam no IE7 e 8.