Quantcast
Channel: Forum | Webflow - Latest topics
Viewing all articles
Browse latest Browse all 89718

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

$
0
0

@TravisBKlein wrote:

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

Posts: 3

Participants: 2

Read full topic


Viewing all articles
Browse latest Browse all 89718

Trending Articles