fancybox上的图片滚动效果

Question

我在我现有的.jpg fancybox缩略图图片上覆盖了一个.png，其余的作品完美。

我有9个图像，并编写了一个循环来创建我的fancybox库在PHP中。我正在使用.png覆盖现有的.jpg缩略图。

这是我的PHP代码：

<?php 
     $i=1; 
     $title=array("", "t1", "t2", "t3", "t4", "t5", "t6", "t7", "t8", "t9"); 

     for($i; $i<10; $i++) 
     { 

     echo "<div id='galeria' class='one-third column alpha'> 
      <a title='".$title[$i]."' class='fancybox' rel='group' href='../img/galeria/big".$i.".jpg'><img src='../img/galeria/thumb".$i.".jpg' alt='' /></a> 
     </div><!--end 1\3 -->"; 

      $i++; 
      echo "<div id='galeria' class='one-third column'> 
      <a title='".$title[$i]."' class='fancybox' rel='group' href='../img/galeria/big".$i.".jpg'><img src='../img/galeria/thumb".$i.".jpg' alt='' /></a> 
     </div><!--end 1\3 -->"; 
      $i++; 
      echo "<div id='galeria' class='one-third column omega'> 
      <a title='".$title[$i]."' class='fancybox' rel='group' href='../img/galeria/big".$i.".jpg'><img src='../img/galeria/thumb".$i.".jpg' alt='' /></a> 
      </div><!--end 1\3 -->"; 
     } 
    ?> 

我使用的onMouseOver和onmouseout没有成功尝试。 （我是新来的JS和jQuery，如果你能提供详细的帮助，我真的会赞叹它）。

Answer 1

我不知道如果我明白你的问题，但试试这个：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script>  
    $(function(){ 
     $(".fancybox").hover(
      function(){ 
       $(".imagem-hover",this).fadeIn(100); 
      }, 
      function(){ 
       $(".imagem-hover",this).fadeOut(100); 
      } 
     ); 
    }); 
</script> 
<style> 
    * {position:relative;} 
    .fancybox .imagem-hover {position:absolute; z-index:1; display:none;} 
</style> 
<div id="galeria"> 
    <a class="fancybox" href="imagemGrande.jpg"> 
     <img class="imagem-hover" src="over.png" /> 
     <img src="thumb.jpg" /> 
    </a> 
    <a class="fancybox" href="imagemGrande.jpg"> 
     <img class="imagem-hover" src="over.png" /> 
     <img src="thumb.jpg" /> 
    </a> 
    <a class="fancybox" href="imagemGrande.jpg"> 
     <img class="imagem-hover" src="over.png" /> 
     <img src="thumb.jpg" /> 
    </a> 
</div>