Question

我正在制作幻灯片（使用Slick），其中“下一个”按钮只是覆盖整个幻灯片的500x500px div - 因此您可以点击其中的任意位置以进入下一张幻灯片。

但是，在某些幻灯片上我还想要一些文字链接。关于链接的类似问题＆＃39;埋藏＆＃39;覆盖元素背后我在顶层使用pointer-events:none看到了解决方案。这让我点击下面的链接，但是，它也会删除顶层的链接。我也曾尝试使用z-index和position，但不知怎的，我无法将链接带到表面，而不会影响覆盖其余部分的链接。我想我正在寻找的一个例子是Twitter如何在推文中处理外部链接 - 你可以点击推文本身（扩展它），也可以点击链接在其中。

如何点击链接后面的链接？

Answer 1

您不必使用特定的DIV来执行“下一张幻灯片事件”，您可以使用容器点击事件。像这样：

脚本：

$(document).ready(function(){
                $('#container').click(function(){
                    // Call your next slide.
                    window.redirect = 'http://www.microsoft.com';
                });
                $('#container a').click(function(e){
                    e.stopPropagation();
                    return true;
                });
            });

HTML示例：

<div style="width: 500px; height: 500px; background-color: #f1f1f1" id="container">
            <!-- Here goes your div content -->
            Some text bla bla bla <a href="#">link</a><br><br>
            Some text bla bla bla <a href="#">link</a><br><br>
            Some text bla bla bla <a href="#">link</a><br><br>
        </div>

看看这是否可以解决您的问题。

单击可点击元素后面的链接

1 个答案: