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

84

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?

Juan
fuente
1
El enfoque CSS no requiere Javascript.
pd.
Recomendaría usar Whatever: hover : http://www.xs4all.nl/~peterned/csshover.html
cheeaun
3
"¿Javascript es más lento que css?" No lo notará, pero javascript consumirá más recursos y puede ralentizar las cosas si se ejecutan muchos otros scripts al mismo tiempo (piense especialmente en dispositivos portátiles, sitios web móviles), y no es para lo que debería usarse. Los CSS, por otro lado, usan menos recursos y están destinados exactamente a la presentación. Debe usar javascript solo para mejorar la navegación y la funcionalidad del sitio web, pero aún así debe ser navegable para usuarios sin js habilitado. Sugiero el enfoque CSS: hover.
Jose Faeti
1
Esta es una pregunta antigua, por lo que no es sorprendente que el comentario anterior ya no sea válido y que nunca lo haya sido. Una razón es la falta de buenas bibliotecas JS que proporcionen un modelo estándar de alto rendimiento (consulte Famo.us). Otra es que los motores JS de los navegadores modernos, tanto de escritorio como móviles, son bastante rápidos. Hay un punto de referencia que lo mide al 80% del rendimiento del código compilado en C nativo. Por supuesto, hay casos excepcionales, pero el impresionante rendimiento de JS en el navegador sigue en pie. Lo que la gente realmente "quiere decir" es que el DOM es lento. JS es bastante rápido, simplemente nunca se dieron cuenta.
pmont

Respuestas:

59

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.

cletus
fuente
Hice una prueba rápida ... aparentemente IE7 no es compatible con div: hover ??
John
Sí, IE7 tiene una compatibilidad del 50% con CSS2. Parte de la razón por la que muchos diseñadores web no pueden soportarlo.
Alan
pero con todos esos rastreadores, rastreadores y piratas informáticos que abusan de la caja de arena tanto como pueden, es simplemente comprensible. no es que ayude a evitar el rastreo, pero es comprensible que la gente trate de hacerlo más difícil. Conozco gente que no permite cookies. y también tienen razones válidas para eso, solo mire las ovejas de fuego. Todavía voté a favor de tu respuesta, porque me encantaría que la gente llegara en 2013, se diera cuenta de que de todos modos los rastrean y habilitan mi (¿nuestro?) juguete favorito.
jascha
Me pregunto si metroui está permitiendo a los usuarios deshabilitar javascript: p pero en serio, chromeos, mozilla's os, metroui todos usan javascript. html5, css3, webgl y javascript serán los lenguajes para crear aplicaciones del lado del cliente en unos pocos años. solo tenga paciencia, pronto habrá javascript fuera del navegador, ya no es necesario deshabilitarlo en el navegador :)
jascha
32

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

Ólafur Waage
fuente
18
Se puede mantener hasta que tenga que admitir IE6 en elementos que no sean <a>. Entonces es una molestia porque tienes que usar un JS-hack. Pero CSS sigue siendo mi camino preferido. Deje que las personas que utilizan un navegador de 1999 tengan una experiencia de 1999.
Tyson
4
La gente debería actualizar esta es la mejor solución ... Sugeriría agregar una etiqueta que detecte el navegador y les diga que actualicen si usan IE <7
Travis Pessetto
11

¿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

Kingjeffrey
fuente
1
Con las transiciones CSS, diría que solo debe usar javascript como respaldo cuando: Hover se aplica a etiquetas que no son de anclaje en navegadores IE más antiguos.
Adam Youngers
Algunos cambios en jsbin hicieron que la demostración no funcionara. Actualicé la demostración para hacer referencia a la versión actual de jQuery, y todo funciona nuevamente.
kingjeffrey
10

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.

Shaun Mahood
fuente
gracias - ¡esto realmente respondió a la pregunta que estaba buscando! :-)
Peter S Magnusson
6

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".

Kunal
fuente
6

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.

Alan
fuente
3
¿Por qué deshabilitarías javascript? ¿Te gusta la experiencia anterior al milenio?
Alex
5
Porque es un riesgo de seguridad y demasiados sitios abusan de javascript. Utilizo un ingenioso complemento de Firefox llamado "NoScript" que, de forma selectiva, te permite habilitar solo los scripts de los sitios que desees.
Alan
5

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.

thismax
fuente
4

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

martin villa
fuente
3

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

Hawk Kroeger
fuente
2

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.

alex
fuente
0

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.

AnnanFay
fuente