jquery - 在 div :hover still works and is visible 的隐藏部分

Question

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

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

谁能帮我解决一下？我应该在哪里更改 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');
    });

});

Answer 1

您在 .tab-box 处错过了 position:relative。

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