Colocar el cursor sobre CSS frente al mouse sobre JavaScript [cerrado]

Hay ocasiones en las que puedo elegir entre usar un elemento CSS: hover o JavaScript onmouseover para controlar la apariencia de los elementos html en una página. Considere el siguiente escenario donde un div envuelve una entrada

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

Quiero que la entrada cambie el color de fondo cuando el cursor del mouse pasa sobre el div. El enfoque CSS es

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

<div><input></div>

El enfoque de JavaScript es

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

¿Cuáles son las ventajas y desventajas de cada enfoque? ¿El enfoque CSS funciona bien con la mayoría de los navegadores web? ¿JavaScript es más lento que css?

El problema con: hover es que IE6 solo lo admite en enlaces. Uso jQuery para este tipo de cosas en estos días:

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

Hace las cosas mucho más fáciles. Eso funcionará en IE6, FF, Chrome y Safari.

El CSS es mucho más fácil de mantener y leer.

¿Por qué no los dos? Use jQuery para efectos animados y CSS como respaldo. Esto le brinda los beneficios de jQuery con una degradación elegante .

CSS:

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

jQuery (usa jQueryUI para animar el color):

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

manifestación

Un beneficio adicional de hacerlo en javascript es que puede agregar / eliminar el efecto de desplazamiento en diferentes momentos en el tiempo, por ejemplo, pasar el cursor sobre las filas de la tabla cambia de color, hacer clic deshabilita el efecto de desplazamiento y comienza a editar en el modo de lugar.

Una gran diferencia es que el estado ": hover" se desactiva automáticamente cuando el mouse se mueve fuera del elemento. Como resultado, cualquier estilo que se aplique al pasar el mouse se invierte automáticamente. Por otro lado, con el enfoque de JavaScript, tendría que definir los eventos "onmouseover" y "onmouseout". Si solo define "onmouseover", los estilos que se aplican "onmouseover" persistirán incluso después de colocar el mouse, a menos que haya definido explícitamente "onmouseout".

EDITAR: Esta respuesta ya no es cierta. CSS está bien soportado y Javascript (lea: JScript) ahora es bastante necesario para cualquier experiencia web, y pocas personas deshabilitan javascript.

La respuesta original, según mi opinión en 2009.

La parte superior de mi cabeza:

Con CSS, es posible que tenga problemas con la compatibilidad con el navegador.

Con JScript, la gente puede deshabilitar jscript (eso es lo que hago).

Creo que el método preferido es hacer contenido en HTML, diseño con CSS y cualquier cosa dinámica en JScript. Entonces, en este caso, probablemente querrá adoptar el enfoque CSS.

Hay otra diferencia a tener en cuenta entre los dos. Con CSS, el :hoverestado siempre se desactiva cuando el mouse se mueve fuera de un elemento. Sin embargo, con JavaScript, el onmouseoutevento no se activa cuando el mouse se mueve del elemento al Chrome del navegador en lugar de al resto de la página.

Esto sucede con más frecuencia de lo que piensa, especialmente cuando crea una barra de navegación en la parte superior de su página con estados de desplazamiento personalizados.

En Internet Explorer, debe declararse un <! DOCTYPE> para que el selector: hover funcione en otros elementos además del elemento <a>.

Utilice CSS, facilita mucho la gestión del estilo en sí.

Con respecto al uso de jQuery para hacer hover , siempre uso el complemento HoverIntent, ya que no dispara el evento hasta que se detiene sobre un elemento por un breve período de tiempo ... esto deja de disparar muchos eventos del mouse sobre si ejecuta accidentalmente el mouse sobre ellos o simplemente al elegir una opción.

Si no necesita 100% de soporte para IE6 con javascript deshabilitado, puede usar algo como ie7-js con comentarios condicionales de IE. Luego, solo usa las reglas de CSS para aplicar efectos de desplazamiento. No sé exactamente cómo funciona, pero usa javascript para hacer que funcionen muchas reglas CSS que normalmente no funcionan en IE7 y 8.