Jqueryマウスオーバー/カテゴリ一覧/複数のサムネイル

Question

私の製品のメインサムネイルと、マウスが最初のサムネイルの上にあるときに2番目のサムネイルをリストするWordPressカテゴリページを作成しようとしています。

私はそれが最初の画像上で動作させることができました： http://www.anapiazza.com.br/category/anel/

しかし、それは他の製品画像に複製されていません。

私は複数の投稿のサムネイルというプラグインを使用して、各投稿ごとに複数のサムネイルを許可しています。

これは私が使っているのjQueryの一部です：

<script>   
    $(document).ready(function(){ 
     $("#productcell").mouseenter(function(){ 
      $("#thumbnail_over").fadeIn("slow"); 
     }); 
    }); 

      $(document).ready(function(){ 
     $("#productcell").mouseleave(function(){ 
      $("#thumbnail_over").fadeOut("slow"); 
     }); 
    }); 

</script> 

そしてこれは、それは私のPHPページの本文にどのように見えるかです：

<div id="productcell"> 

     <!-- Image Swap Mouse Over --> 

      <a href="<?php the_permalink() ?>"> 


      <div id="thumbnail_normal"><?php the_post_thumbnail(); ?></div> 

      <div id="thumbnail_over" style="display: none"> 
       <?php if (class_exists('MultiPostThumbnails')) : 
       MultiPostThumbnails::the_post_thumbnail(
       get_post_type(), 
       'secondary-image' 
       ); 
       endif; ?> 
      </div> 


      </a>    

     </div> 

これは、この部分のための私のCSSですページ：

#productcell {float: left; position: relative; width:30%; height: 40%; margin: 1%} 
#thumbnail_normal {position: absolute; width: 100%; height: 100%; } 
#thumbnail_normal img {max-width: 100%; height: auto} 
#thumbnail_over {position: absolute; z-index: 10} 
#thumbnail_over img {max-width: 100%; height: auto} 

私は知っている多くのことが起こっている...多分私は私がaccoしようとしているとにかく - 誰が何がうまくいかないのか考えている？

Answer 1

複数の要素に対してIDと宣言しています.IDは一意です。これらの要素をクラスに変更します。
HTML

 <!-- Image Swap Mouse Over --> 

      <a href="<?php the_permalink() ?>"> 


      <div class="thumbnail_normal"><?php the_post_thumbnail(); ?></div> 

      <div class="thumbnail_over" style="display: none"> 
       <?php if (class_exists('MultiPostThumbnails')) : 
       MultiPostThumbnails::the_post_thumbnail(
       get_post_type(), 
       'secondary-image' 
       ); 
       endif; ?> 
      </div> 


      </a>    

     </div> 

JS

<script>   
    $(document).ready(function(){ 
     $(".productcell").mouseenter(function(){ 
      $(".thumbnail_over").fadeIn("slow"); 
     }); 
    }); 

      $(document).ready(function(){ 
     $(".productcell").mouseleave(function(){ 
      $(".thumbnail_over").fadeOut("slow"); 
     }); 
    }); 

</script> 

CSS

.productcell {float: left; position: relative; width:30%; height: 40%; margin: 1%} 
.thumbnail_normal {position: absolute; width: 100%; height: 100%; } 
.thumbnail_normal img {max-width: 100%; height: auto} 
.thumbnail_over {position: absolute; z-index: 10} 
.thumbnail_over img {max-width: 100%; height: auto}