Disable Links In Mobile, Until Parent Div Is Hovered/Clicked

Hey guys! I’m at it again :stuck_out_tongue:

I have a parent div “mypage post section top 1” and inside it (grandchildish) is a link block.

I have this parent div initially at a 40% opacity and on hover it goes to 100%. On mobile when you click this parent div, the div goes directly to 100% opacity, perfect.

Problem is, if the user clicks the part inside this parent div, that is the LINK BLOCK, then the user gets taken to that external link.

I need this to be 2 step process, click to bring opacity to 100% (on mobile its treated as hovering" and the link block inside is now able to be clicked.

I have done some research and found out about pointer events and maybe something like this might work:
.mypage-post-section-top-1 a { pointer-events: none; }
.mypage-post-section-top-1:hover a { pointer-events: all; }

But I tried this and I couldn’t get it working.

Maybe because the mobile click considers it a hover at the same time, so the link is activated?

If I was to have a small js script done, what should my concerns be… what ways could I best get this done given the webflow environment?

thanks so much for your input, alot of help :slightly_smiling:

Mysite:
https://preview.webflow.com/preview/traviss-superb-site-1ab6a2?preview=46db44c12e35fb4ff7228e884dd86b0a

I have hard time to find the element in your site :smiley:

Have you tried using interactions with click trigger? You could make the link block show only after the first click, or you could place a div on top of if to block the click and make that div vanish after the first click…

sorry @vincent here is where it is, right on the homepage:

It would have to display before the first click because it has an img element inside it that needs to be seen.

Hm so then I’m going to try placing a transparent div on top of the link (in mobile only) as absolute positioned and have that go to not visable when my div is hovered.

I’m going to try that now.

Edit: just tried that and the trigger works great, the div on top of the link block comes and goes with the hover, but the link is still active even with the div covering the link block.

Edit again: I figured it out with js.
$(‘.grindpost a’).each(function(e){
$(this).click(function(e){
if ($(this).closest(‘.grindpost’).css(‘opacity’) != 1) { e.preventDefault(); return false; }
});

1 Like