Make elements clickable even if pointer-events is set to none

Question

I am developing a tab slider and it is almost finished. However, I have bumped into a problem that makes elements unclickable.

Currently, I have a div with class name content that contains all of slider's contents. It is positioned above the slider div.

Because the contents are above the slider div, I decided to set pointer-events to none to allow the slider to work.

var slider = $('.slider');
var tabone = $('.tabone');
var tabtwo = $('.tabtwo');
var overlayOne = $('.tabone .overlay');
var overlayTwo = $('.tabtwo .overlay');
var contentOne = $('.content-one');
var contentTwo = $('.content-two');

$('.btnsample').click(function() {
    alert('ok');
});

slider.on('mouseover', function () {
    if (slider.width() == 250) {
      slider.width(800);    
      contentOne.toggleClass('o-hidden o-visible');
      contentTwo.toggleClass('o-visible o-hidden');

      overlayTwo.toggleClass('off on');
      overlayOne.toggleClass('on off');
    }  
});

tabone.on('mouseover', function () {
    if (slider.width() == 800) {
        slider.width(250);
        contentOne.toggleClass('o-visible o-hidden');
        contentTwo.toggleClass('o-hidden o-visible');

        overlayTwo.toggleClass('on off');
        overlayOne.toggleClass('off on');
    }  
});

$('.tab-btn').click(function() {
    alert('clickable');
});

.wrapper {
    max-width: 960px;
    width: 100%;
    max-height: 410px;
    height: 410px;
    position: relative;
    display: flex;
}

.tab {
    width: 960px;
    height: 410px;
}

.tab .overlay {
    transition: opacity 1s ease-in-out;
}

.tabone {
    position: absolute;
    background: url('https://images.unsplash.com/photo-1508270355006-9e3484a234c7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ab353574fe9402b9f3c4cf82053c36ad&auto=format&fit=crop&w=1993&q=80');
    background-size: cover;
}

.slider {
    width: 800px;
    overflow: hidden;
    display: inline-block;
    transition: width 1s ease-in-out;
}

.forward-diagonal {
    transform: skewX(-20deg);
}
.forward-diagonal-inner {
    transform: skewX(20deg);
}

.backward-diagonal {
    transform: skewX(20deg);
}
.backward-diagonal-inner {
    transform: skewX(-20deg);
}

.tabtwo {

    justify-content: flex-end;
     margin-left: 76px; 
    background: url('https://images.unsplash.com/photo-1533176888412-f49e08b436a6?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5ba2943090f74337a3fb0c49c1d804e3&auto=format&fit=crop&w=1050&q=80');
    background-size: cover;
}

.slider {
    margin-left: -76px;
}


.content {
    position: absolute;
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;
    display: flex;
    pointer-events: none;
}

.content p {
    color: #ffffff;
    font-size: 24px;
}

.content-one {
    width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: all 1s ease-in-out;
}

.content-two {
    width: 800px;
    display: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: all 1s ease-in-out;
}

.o-visible {
    opacity: 1;
}

.o-hidden {
    opacity: 0;
}
.overlay {
    background-color: blue;
    display:block;
    width:100%;
    height:100%;
}

.on {
    opacity:.5;
}
.off {
    opacity:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="wrapper">
    <div class="tab tabone">
        <div class="overlay off">
        </div>
    </div>
    <div class="slider forward-diagonal">
        <div class="tab tabtwo forward-diagonal-inner">
            <div class="overlay on">
            </div>
        </div>
    </div>
    <div class="content">
        <div class="content-one o-visible">
            <p>Sample Text</p>
            <button class="btnsample">click</button>
        </div>
        <div class="content-two o-hidden">
            <p>Sample Text</p>
            <button class="btnsample">click</button>
        </div>
    </div>
</div>

Is there any way that I can make the elements clickable that doesn't ruin the slider's functionality?

Here is my complete code: https://jsfiddle.net/gyLoczb5/18/

Have you tried doing `.btnsample { pointer-events: auto; }` ... that will work as `pointer-events` can be set on a child even if parent has `none` — Asons, Sep 21 '18 at 19:50
@LGSon apologies, I have entered the wrong fiddle. The one above is updated. I tried `.tab-icon { pointer-events: auto; }` , and it works. However, if you hover in the button, the slider shakes. — Kim Lian Lopez, Sep 21 '18 at 20:28

score 2 · Answer 1 · answered Sep 21 '18 at 19:51

2

You can set the pointer-events explicitly on the buttons.

.content>.o-visible button {
  pointer-events: auto;
}

answered Sep 21 '18 at 19:51

Steven B.

8,962
3
24
45

1

@LGSon Yeah I had to look that up on MDN. Couldn't remember all the values. – Steven B. Sep 21 '18 at 19:55
Apologies, I have entered the wrong fiddle. The one above is updated. I tried `.content>.o-visible button {pointer-events: auto;}` , and it works. However, if you hover in the button, the slider shakes – Kim Lian Lopez Sep 21 '18 at 20:34
@KimLianLopez off the top of my head I would add mouseover events to the buttons as well. This should allow you to maintain the tab width for each one and still allow the click. – Steven B. Sep 21 '18 at 21:08

Make elements clickable even if pointer-events is set to none

1 Answers1