Hover en utilisant jQuery

Question

Avoir un peu de problème de débogage mon code jQuery ...

Afin de permettre des effets de vol plané sur les éléments de bloc (comme div) dans IE, je veux utiliser jQuery pour faire l'affaire au lieu de css. Mon code jQuery ressemble à quelque chose comme:

$(document).ready(function() 
{ 
    $("div.foo").mouseover(function(){ 
      $("div.foo h3").addClass("hover"); 
     }).mouseout(function(){ 
      $("div.foo h3").removeClass("hover"); 
    }); 
}); 

Cela fonctionne comme mon commutateur d'en-tête entre h3 et h3.hover, MAIS si je tente de:

$(document).ready(function() 
{ 
    $("div.bar").mouseover(function(){ 
      $(this).addClass("hover"); 
     }).mouseout(function(){ 
      $(this).removeClass("hover"); 
    }); 
}); 

Cela ne fonctionnera pas dans toutes les versions de IE. Cela signifie-t-il IE a du mal à détecter plusieurs classes sur 1 élément (qui est div.bar.hover)? Merci d'avance.

EDIT:

Après examiné le code, j'ai réalisé le problème réside dans un conflit avec le javascript curvycorners-2.0.4 (qui est un autre IE bidouille) qui ont également été appliquées à cet élément.

Answer 1

utilisation toggleClass à la place:

$(document).ready(function() 
{ 
    $("div.bar").mouseover(function(){ 
      $(this).toggleClass("hover"); 
     }).mouseout(function(){ 
      $(this).toggleClass("hover"); 
    }); 
}); 

Il ajoutera la classe sinon là, et enlever si elle est déjà appliquée.

Et corriger: div.bar.hover n'est pas valide CSS sélecteur pour IE6. Au lieu de faire quelque chose comme ça: #myPanel div.hover.

Answer 2

Il est vrai que IE6 ne peut pas gérer plusieurs classes CSS, p.ex:

div.one.two{color:red} 

ne fonctionnera pas pour <div class="one two">red</div>

Mise à jour: Il est peut-être un problème de bouillonnement aussi bien, essayez d'utiliser la .hover helper http://docs.jquery.com/Events/hover pour éviter cela.

Answer 3

L'exemple fourni par vous fonctionne parfaitement dans IE6 (ne peut pas vérifier IE7/8). Vérifiez ici

http://jsbin.com/uyopi

Answer 4

encore plus court:

$('div.bar').on('mouseenter mouseleave', function() { 
    $(this).toggleClass('hover'); 
});​