appliquer les fonctions javascript à tous les objets dans une classe css

Question

J'ai ce code:

$("#SidingPainting").hover(
      function() { 
       $(this).addClass("ui-state-hover"); 
      }, 
      function() { 
       $(this).removeClass("ui-state-hover"); 
      } 
     ) 

mais j'ai beaucoup, comme une centaine divs que je veux appliquer ces mêmes fonctions!

Existe-t-il un moyen de créer une classe css et de l'appliquer à chaque div puis d'appliquer ces fonctions à la classe css?

Ou d'autres idées sur la façon de faciliter ma vie?

Answer 1

Avec $ de jQuery, vous pouvez utiliser des sélecteurs CSS. Donc, il suffit d'écrire .className au lieu de #id

$(".hoverClass").hover(
     function() { 
      $(this).addClass("ui-state-hover"); 
     }, 
     function() { 
      $(this).removeClass("ui-state-hover"); 
     } 
    ) 

Pour cela, vous devez utiliser la pseudo-classe :hover, mais IE6 ne supporte que sur les a-tags. Vous avez donc besoin d'une solution de repli JavaScript comme celle-ci. Detecting IE6 using jQuery.support

Answer 2

Vous n'avez même pas besoin de JavaScript si vous voulez simplement changer la classe en survol. Il suffit de donner tous vos div s une classe commune et utiliser la pseudo-classe CSS :hover pour modifier les styles de vol stationnaire:

.SidingPainting { /* this is a class, not an ID */ 
    ... 
} 

.SidingPainting:hover { 
    ... 
}