花式缩略图悬停效果

Question

我正在使用脚本 - 用于选项卡式内容区域内的漂亮的小图片库。

我正在使用; http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/但定制几乎四分之一的大小，只有3个图像，并重新调整大拇指坐在“主视图”图像区域正下方。我成功地完成了它，并且在视觉上它非常棒。

大拇指大约50px，在悬停时扩大到大约60px，并且点击时 - 它会将主视图区域与正确的图像一样占据主角区域。

问题是，真的很奇怪，因为我反复使用了这个脚本 - 出于某种原因，3个拇指的参数也在主视图上重复 - 但实际的图像是不可见的。当用户将鼠标放在主视图上方 - 50px 60px正方形/矩形参数之间的任何位置时 - 会显示下面图像的悬停。

我一直在经历着一遍又一遍的代码 - 我知道这是愚蠢的 - 如果任何人都可以给我一个很棒的建议。

下面是截屏的视觉情况 - 检查出来;http://tinypic.com/r/2nt8o7t/7

的加价：

<!-- Thumb Gall Mark-Up --> 

<div class="containerslide"> 

<ul class="thumb"> 

    <li><a href="img/appimg_1.jpg"><img src="img/appimg_1.jpg" alt="" /></a></li> 
    <li><a href="img/appimg_2.jpg"><img src="img/appimg_2.jpg" alt="" /></a></li> 
    <li><a href="img/appimg_3.jpg"><img src="img/appimg_3.jpg" alt="" /></a></li> 


</ul> 

<div id="main_view"> 

    <img src="img/appimg_1.jpg" alt="" /></a><br /> 

</div> 
</div> 

<!--End Thumb Gall Mark-Up--> 

查询：

 <script src="js/modernizr.custom.37797.js"></script> 

     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 

//Larger thumbnail preview 

$("ul.thumb li").hover(function() { 
    $(this).css({'z-index' : '10'}); 
    $(this).find('img').addClass("hover").stop() 
     .animate({ 
      marginTop: '0px', 
      marginLeft: '0', 
      top: '360px', 
      left: '0', 
      width: '65px', 
      overflow: 'hidden', 
      height: '80px', 
      padding: '3px' 
     }, 200); 

    } , function() { 
    $(this).css({'z-index' : '0'}); 
    $(this).find('img').removeClass("hover").stop() 
     .animate({ 
      marginTop: '0', 
      marginLeft: '0', 
      top: '360px', 
      left: '0', 
      width: '60px', 
      overflow: 'hidden', 
      height: '60px', 
      padding: '3px' 
     }, 200); 
}); 

//Swap Image on Click 
    $("ul.thumb li a").click(function() { 

     var mainImage = $(this).attr("href"); //Find Image Name 
     $("#main_view img").attr({ src: mainImage }); 
     return false;  
    }); 

}); 
</script> 

的CSS;

<!--minSlide Show Styles --> 

* { padding: 0;} 
img {border: none;} 
.containerslide { 
    margin-top: -71px; 
} 

ul.thumb { 
    float: left; 
    list-style: none outside none; 
    padding: 12px; 
    width: 360px; 
} 

ul.thumb { 
    width: 360px; 

} 


ul.thumb li { 
    padding: 3px; 
    float: left; 
    position: relative; 
    width: 60px; 
    height: 60px; 

} 
ul.thumb li img { 
    width: 60px; height: 60px; 
    border: 1px solid #ddd; 
    padding: 3px; 
    background: #f0f0f0; 
    position: absolute; 
    left: 0; 
    -ms-interpolation-mode: bicubic; 
    margin-top: 365px; 

} 
ul.thumb li img.hover { 
    background:url(thumb_bg.png) no-repeat center center; 
    border: none; 


} 
#main_view { 
    float: left; 
    margin-left: -217px; 
    margin-top: 41px; 
    padding: 9px 0; 
} 




<!-- End Slide Show Styles --> 

Answer 1

我在这里看到了不必要a标签，

<div id="main_view"> 

    <img src="img/appimg_1.jpg" alt="" /></a><br /> 

</div> 

这是什么做什么。也许这是造成一个问题，并扰乱整个剧本，请张贴小提琴，如果问题仍然存在。