编辑:我明白了。 jQuery Cycle 插件为其工作的每个元素添加了 z 索引,因此第一个元素始终具有最高的 z 索引,从而弄乱了所有链接。从插件中删除 z-index 功能已修复该问题。
你好,
我目前正在使用 jQuery Cycle 构建一个循环 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 设置?
最佳答案
我在使用 Cycle Lite 插件时遇到了完全相同的问题,这让我抓狂...但即使从插件中删除 z-index 也无法帮助我解决我的特殊情况(我的内部幻灯片 HTML 有点复杂)比您上面发布的内容)。
显然,Cycle Lite 插件(仅包括淡入淡出过渡)和完整的“Cycle All”插件之间存在一些逻辑差异。
基本上,解决方案最终是安装 Cycle All 插件。从技术上讲,这有点过分了,但我终于有了一个淡入淡出的幻灯片,每个图像上都有单独的链接,而无需破解任何东西。
关于jQuery 循环 : Links within cycled div overlapping each other?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3373573/