CSS hover vs. JavaScript mouseover

Question

Hay ocasiones en 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 para cambiar el color de fondo cuando el cursor del ratón 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 JavaScript es

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

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

Answer 1

El problema con: hover es que IE6 solo lo admite en los enlaces. Yo 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.

Answer 2

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

Answer 3

El enfoque de CSS no requiere Javascript.

Answer 4

Usar CSS, hace que la administración del estilo sea mucho más fácil.

Answer 5

EDITAR: Esta respuesta ya no es válida. CSS está bien soportado y JavaScript (leer: JScript) ahora es más que necesario para cualquier experiencia en la web, y poca gente desabilita javascript.

La respuesta original, ya que mi opinión en 2009.

De la parte superior de mi cabeza:

Con CSS, es posible que tenga problemas con el apoyo del navegador.

Con JScript, las personas pueden desactivar 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 quieras adoptar el enfoque de CSS.

Answer 6

yo recomendaría usar Cualquiera que sea: hover: http://www.xs4all.nl/~peterned/csshover.html

Answer 7

Si no es necesario un apoyo del 100% para IE6 con JavaScript desactivado podría utilizar algo así como ie7-js con IE comentarios condicionales. Luego solo usa las reglas css para aplicar efectos de desplazamiento. No sé exactamente cómo funciona pero utiliza javascript para hacer funcionar muchas reglas css que normalmente no funcionan en IE7 y 8.

Answer 8

En reguards a using jQuery to do hover, siempre uso el complemento HoverIntent ya que no funciona t desencadenar el evento hasta que pause sobre un elemento durante un breve período de tiempo ... esto deja de disparar un montón de eventos de mouse si accidentalmente pasa el mouse sobre ellos o simplemente al elegir una opción.

Answer 9

Una ventaja adicional de hacerlo en javascript es que puede agregar/eliminar el efecto de desplazamiento en diferentes momentos, p. Ej.Pase el ratón sobre las filas de la tabla cambia de color, haga clic en deshabilita el efecto de desplazamiento y comienza la edición en el modo de lugar.

Answer 10

¿Por qué no ambos? Use jQuery para efectos animados y CSS como alternativa. Esto le brinda los beneficios de jQuery con graceful degradation.

CSS:

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

jQuery (utiliza jQueryUI para animar color):

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

demo

Answer 11

Hay otra diferencia a tener en cuenta entre los dos. Con CSS, el estado :hover es siempre desactivado cuando el mouse se mueve fuera de un elemento. Sin embargo, con JavaScript, el evento onmouseout no se activa cuando el mouse se mueve desde el elemento hacia el navegador Chrome en lugar de hacia el resto de la página.

Esto ocurre más a menudo de lo que piensas, especialmente cuando estás haciendo una barra de navegación en la parte superior de la página con estados de desplazamiento manual personalizados.

Answer 12

En Internet Explorer, debe declararse <! DOCTYPE> para que el selector: hover trabaje en otros elementos distintos del < a> elemento.

Answer 13

Una diferencia muy grande es que el estado ": hover" se desactiva automáticamente cuando el mouse se mueve fuera del elemento. Como resultado, todos los estilos que se aplican sobre el vuelo estacionario se invierten automáticamente. Por otro lado, con el enfoque javascript, debería definir los eventos "onmouseover" y "onmouseout". Si solo define "onmouseover", los estilos aplicados "onmouseover" persistirán incluso después de que salga el mouse a menos que haya definido explícitamente "onmouseout".