花式縮略圖懸停效果

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> 

這是什麼做什麼。也許這是造成一個問題，並擾亂整個劇本，請張貼小提琴，如果問題仍然存在。