0

我有一个简单的编码： http: //jsfiddle.net/8AMa4/20/（愚蠢的颜色只是为了指示；））

基本上它确实有效，但有一个小故障，我不知道如何修复。在 div 中有图片“页面”，当您按下按钮时，它会滑到一边，一次只能看到一个。当您将鼠标悬停在可见图片上时，会出现一些淡入。问题是悬停时这种淡入淡出也出现在 div 的本应隐藏的部分。（如果您将鼠标移动到 man div 的右侧，您可以在 jsfiddle 示例中看到它）。

任何人都可以帮我解决问题吗？我应该在哪里更改 2“效果”（悬停和滑动）中的任何一个？

HTML：

<div class="tab-box">

  <div class="tabs">
    <div class="tab">1</div>
    <div class="tab">2</div>
    <div class="tab">3</div>
  </div>

  <div class="items">
    <div class="item" style="background: red;">
        <a href="#"><span class="rollover"></span><img class="thumbnail" alt="" src="http://www.sxc.hu/pic/m/s/sk/skapie/1218910_guitar.jpg"/></a>
    </div>
    <div class="item" style="background: blue;">
        <a href="#"><span class="rollover"></span><img class="thumbnail" alt="" src="http://www.sxc.hu/pic/m/s/sk/skapie/1218910_guitar.jpg"/></a>
    </div>
    <div class="item" style="background: green;">
         <a href="#"><span class="rollover"></span><img class="thumbnail" alt="" src="http://www.sxc.hu/pic/m/s/sk/skapie/1218910_guitar.jpg" /></a> 
    </div>
  </div>
</div>

jQuery：

$(document).ready(function() {
    $('.tab-box').each(function() {
        var left = 0;
        var $tabbox = $(this);
        var width = $tabbox.width();

        $(this).find('.tab').each(function() {
            var shift = left;

            $(this).click(function() {
                $tabbox.find('.items').animate({marginLeft: shift + 'px'});
                $tabbox.find('.tab').removeClass('active');
                $(this).addClass('active');
            });

            left -= width;
        });

        $(this).find('.tab:eq(0)').addClass('active');
    });

});
4

1 回答 1

1

你错过position:relative了.tab-box.

工作：http: //jsfiddle.net/8AMa4/26/

于 2013-05-04T19:39:31.850 回答