jquery - 花哨的缩略图悬停效果

Question

我正在使用一个脚本 - 用于标签式内容区域内的一个非常小的图片库。

我正在使用； http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/但定制为几乎四分之一的大小，只有 3 张图片，并重新对齐，让拇指直接位于“主视图”图像区域下方。我已经成功地完成了它，并且在视觉上它很棒。

缩略图大约为 50 像素，在悬停和单击时会扩展到大约 60 像素 - 它也会像预期的那样在主视图区域中显示正确的图像。

问题是，而且真的很奇怪，因为我一遍又一遍地使用这个脚本 - 出于某种原因，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>

这是在做什么。也许这会造成问题并扰乱整个脚本，如果问题仍然存在，请发布 fiddle 。