悬停在滑块内的按钮上不起作用

Question

我在这里疯狂。这是非常基本的。我有5个滑块图像，每个图像都有一个链接到图库的黑色按钮。我想在按钮上悬停时更改背景颜色，但它只能处理子滑块。

我相当肯定它是一个定位问题，但我已经尝试将z-index值添加到.banner-text div，但它并没有产生任何影响。

Here is the website.

Answer 1

这里的问题是，您的.slides ul li具有绝对定位，并且它们都具有完全相同的z-index。滑块库似乎只为<li>元素内的图像的不透明度设置动画。因此，您的所有<li>元素都存在并且相互叠加。它导致悬停问题，因为悬停/点击/等。不会通过绝对元素到底部。

儿童滑块有效，因为它是最顶层的幻灯片。你可以通过简单地拖动另一张幻灯片作为最后一张来测试它，它上面的按钮就可以了。

作为解决方案，我建议您为所有非活动幻灯片分配z-index: -1。我不知道你的情况是否可行。也许你需要寻找一个不同的滑块库。

UPD：顺便说一下，Slick是你当前lib的一个很好的替代品。 http://kenwheeler.github.io/slick/。我用了很多时间，它很干净，可以自定义。