CODEWITHSUNDEEP
csshyperlinkz-index
Jonas
Jonas

Reputation: 25

Click link behind clickable element



I'm making a slideshow (using Slick), where the 'next'-button is simply a 500x500px div covering the whole slide – so you can click anywhere on it in order to get to the next slide.

However, on some of the slides I also want some text links. On similar problems with links 'buried' behind overlaying elements I've seen solutions using pointer-events:none on the top layer. This lets me click the link below, however, it also removes the link from the top layer. I've also tried playing around with the z-index and position, but somehow I can't manage to bring only the link to the surface, without compromising the link covering the rest of the slide.

I guess an example of what I'm looking for is how Twitter handles external links in their tweets – you can click on the tweet itself (expanding it), but also on the link within it.

How can I click on a link behind a link?

Upvotes: 1

Views: 457

Answers (1)

Rodrigo Leite
Rodrigo Leite

Reputation: 874

You do not have to use a especific DIV to execute the "next slide event", you can use the container click event. Like this:

Script:

$(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 example:

<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>

See if this resolve your problem.

Upvotes: 2

Related Questions