hover med jquery på flere billeder

Hvad er grunden til at du ikke laver det med css?

<style>
a {
    background: url(img/partners/1-gray.png) no-repeat;
    display: block;
    width: 121px;
    height: 30px;
}
a:hover {
    background: url(img/partners/1.png) no-repeat;
}
<a href="#"><img src="img/blank.gif" /></a>

Det her er det du gør:

1. Laver billederne i CSS Sprites i stedet for. # http://www.w3schools.com/css/css_image_sprites.asp
2. Laver en css der ser sådan her ud:

 #partners div {
 height: 100px;
 width: 100px;
 
 background-position: 0 0;
 }
 
 #partners div:hover {
 background-position: -100 0;
 }

Og så vil du garanteret gerne have at du bare kan smide et img ind og så det selv ordner sig, uden at du skal lave en class i css.

3. Der kan du køre noget ligende dette:

 $("#partners img").each(function( index ) {
      var img = $(this).attr('src');
      $("#partners").append('<div style="background-image: url(' + img + ');"></div>');
      $(this).remove();
 });

Ikke lige testet, men det er mit bud.

Du kan selvfølgelig også lave noget ligende dette:

 <div id="partners">
      <div>
           <img src="IMGFARVE" class="color">
           <img src="IMGGREY" class="grey">
      </div>
 </div>

 #partners div {
 height: 100px;
 width: 100px;
 
 position: relative;
 }
 
 #partners div img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 heigth: 100%;
 }
 
 #partners div .color {
 display: none;
 }
 
 #partners div:hover .color {
 display: block;
 }
 
 #partners div:hover .grey {
 display: none;
 }

Hej

Altså jeg vil gerne ud over at lave dem til links. og gøre det i rent CSS er en mulighed men så skal der laves en for hver.

Super, tak for hjælpen