javascript - react - onmouseover()

CSS hover vs. JavaScript mouseover

Question

Hay momentos en los que puedo elegir entre usar un elemento CSS: colocar el cursor o JavaScript onmouseover para controlar la apariencia de los elementos html en una página. Considere la siguiente situación en la que un div ajusta una entrada

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

Quiero que la entrada cambie el color de fondo cuando el cursor del mouse se desplaza sobre div. El enfoque de 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 de CSS funciona bien con la mayoría de los navegadores web? ¿JavaScript es más lento que css?

Answer 1

¿Por qué no ambos? Use jQuery para efectos animados y CSS como alternativa. Esto le brinda los beneficios de jQuery con 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);
  }
);

demo

Answer 2

EDITAR: esta respuesta ya no es verdadera. 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, como mi opinión en 2009.

La parte superior de mi cabeza:

Con CSS, puede tener problemas con el soporte del navegador.

Con JScript, la gente puede 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 3

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

Answer 4

El enfoque de CSS no requiere Javascript.

Answer 5

El problema con: flotar 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.

Answer 6

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

Answer 7

En cuanto al uso de jQuery para desplazarte, siempre uso el complemento HoverIntent ya que no HoverIntent el evento hasta que pausas sobre un elemento durante un breve período de tiempo ... esto deja de disparar muchos eventos del mouse si accidentalmente se ejecuta el mouse sobre ellos o simplemente mientras elige una opción.

Answer 8

Hay otra diferencia a tener en cuenta entre los dos. Con CSS, el :hover estado de desplazamiento siempre se desactiva 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 creando una barra de navegación en la parte superior de la página con estados de desplazamiento manual personalizados.

Answer 9

Recomendaría usar Whatever: hover : http://www.xs4all.nl/~peterned/csshover.html

Answer 10

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

Answer 11

Un beneficio adicional de hacerlo en javascript es que puede agregar / eliminar el efecto de desplazamiento en diferentes momentos: por ejemplo, al pasar el ratón sobre las filas de la tabla, cambia el color, el clic desactiva el efecto de desplazamiento y comienza la edición en el modo de lugar.

Answer 12

Una gran diferencia 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".

Answer 13

Use CSS, facilita la administración del estilo en sí mismo.