Question

编辑：我想出来了。 jQuery Cycle插件为它通过的每个项添加一个z-index，因此第一个项始终具有最高的z-index，弄乱了所有链接。从插件中删除z-index功能已修复它。

你好，

我正在使用jQuery循环构建一个循环div，它有一些内部链接。基本上，我们有一个大横幅，然后在那个大横幅内我有一些绝对定位的div包含产品，缩略图到视频等。我也有自定义分页。

所有这一切都非常有效。我现在的问题是，当它旋转到第二个div时，与第一个div相同位置的链接优先并重叠第二个div的链接，因此对任何用户交互都没有用。

这是我的代码的基础知识，以便更好地解决它。我还概述了我的职位安排，以回应下面的答案。

    #rotation {
         position: relative;
    }

     .rotation_item {
         position: relative;
     }

     .rotation_box {
         position: relative;
     }

<div id="rotation">
<div id="rotation_container">
      <div class="rotation_item" style="background: url('/some/background.jpg');">
             <div class="rotation_box">
                <img src='/image/for/product.jpg' />
                <h3><a href='/product/page/'>Some Cool Product!</a></h3>
             </div>
      </div> 
      <div class="rotation_item" style="background: url('/some/other/background.jpg');">
             <div class="rotation_box">
                <img src='/image/for/other/product.jpg' />
                <h3><a href='/product/page_other/'>Some Other Cool Product!</a></h3>
             </div>
      </div> 
</div>
</div>

在这种情况下，始终显示单击的唯一链接是/product/page/

我希望这是有道理的，有没有人知道如何使用jQuery Cycle包来防止这种情况发生，或者每个rotation_item上有一些有趣的CSS设置？

Answer 1

我有与Cycle Lite插件完全相同的问题，它让我疯了......但即使从插件中删除z-index也没有帮助我的特殊情况（我的内部幻灯片HTML有点复杂比你上面发布的那样）。

显然，Cycle Lite插件（仅包括淡入淡出过渡）和完整的“全部循环”插件之间存在一些逻辑差异。

基本上，该解决方案最终安装了Cycle All插件。这在技术上有点过分，但我终于有一个淡入淡出的幻灯片，每个图像上都有单独的链接，而不必破解任何东西。

Answer 2

我的猜测是你的链接与rotation_container而不是rotation_item相关联，因此在他们给定的位置上闲逛。如果您还没有，请尝试将position: relative添加到您的rotation_item元素的CSS中 - 这可能会很好地解决您的问题。

jQuery Cycle：循环div中的链接相互重叠？

2 个答案: