代码之家  ›  专栏  ›  技术社区  ›  Bartek

jQuery Cycle:循环div中的链接彼此重叠?

  •  2
  • Bartek  · 技术社区  · 15 年前

    编辑:我想出来了。jquerycycle插件将z索引添加到它所处理的每个项目中,因此第一个项目总是具有最高的z索引,从而弄乱了所有链接。从插件中删除z-index功能已经修复了它。

    你好,

    所有这些几乎都非常有效。我现在的问题是,当它旋转到第二个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/

    2 回复  |  直到 15 年前
        1
  •  1
  •   Ryan Kinal    15 年前

    rotation_container 而不是 rotation_item ,所以它们在给定的位置上徘徊。如果还没有,请尝试添加 position: relative 旋转\u项

        2
  •  3
  •   Nic Pfost    15 年前

    我和Cycle Lite插件有着完全相同的问题,这让我发疯了……但是即使从插件中删除z索引也无助于我的特殊情况(我的内部幻灯片HTML比你上面发布的要复杂一些)。

    基本上解决方案是安装Cycle-All插件。从技术上讲,这是过度杀戮,但我终于有了一个褪色的幻灯片,每个图像上有单独的链接,而不必黑客任何东西。