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

您错过了position:relative的{{1}}。

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

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

1 个答案: