css hover vs javascript passage de la souris

Question

Il y a des moments où j'ai le choix entre l'utilisation des css de l'élément:hover ou javascript onmouseover pour contrôler l'apparence des éléments html sur une page. Considérez le scénario suivant, où une DIV qui encapsule une ENTRÉE

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

Je veux la saisie pour changer la couleur d'arrière-plan lorsque le curseur de la souris survole l'élément div. Le CSS approche est

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

Le javascript approche est

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

Quels sont les avantages et les inconvénients de chaque approche? Le CSS approche fonctionne bien avec la plupart des navigateurs web? Javascript est plus lent que le css?

Answer 1

Le problème avec :hover est que IE6 ne supporte il sur les liens. J'utilise jQuery pour ce genre de chose ces jours-ci:

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

Rend les choses beaucoup plus facile. Que vais travailler dans IE6, FF, Chrome et Safari.

Answer 2

Le CSS est beaucoup plus facile à gérer et lisible.

Answer 3

Pourquoi pas les deux? Utilisation de jQuery pour les effets d'animation et CSS secours. Cela vous donne les avantages de jQuery avec la dégradation gracieuse.

CSS:

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

jQuery (utilise jQueryUI pour animer la couleur):

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

démo

Answer 4

Un avantage supplémentaire pour le faire en javascript, vous pouvez ajouter / supprimer hover effet à différents points dans le temps - par exemple, passez la souris sur les lignes de la table change de couleur, cliquez sur désactive l'effet hover et commence à modifier le mode.

Answer 5

Le CSS approche ne nécessite pas de Javascript.