Jquery 在div的隐藏部分：hover仍然有效并且可见

我有一个简单的编码：（愚蠢的颜色只是为了表示；））

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

有人能给我一个解决办法吗？我应该在哪里更改2“效果”（悬停和滑动）

HTML:

---

您错过了

选项卡框

中的

位置：相对

工作：

---

请包含您的代码，而不仅仅是一个指向jsfiddle.Szandra的链接：正如@JamesMontagne所说，这次我为您修复了它，但将来请包含（相关的）code.OMG。这么小的错误。非常感谢：）抱歉忘了代码，我不习惯问：）

<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>

$(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');
    });

});