/    Sign up×
Community /Pin to ProfileBookmark

Canvas Background Z-Index Problem

I just have one problem left and I couldn’t solve it. I added a canvas to my website, but I’m having a z-index problem. When I use the pointer-events:none code, I cannot select the posts. A website solved the problem I mentioned. But I didn’t know how to do it.

My Example Url :
https://codepen.io/mrtsiradisi/pen/wvPNyaO

Working Url :
https://advanced.team/

to post a comment
HTMLJavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumMar 09.2022 — Your demo doesn't have any elements that can be operated but I suspect, the original site has and it should react on both, mouse movement across the canvas and operation other elements, right?
Copy linkTweet thisAlerts:
@mrtsrdsauthorMar 09.2022 — @Sempervivum Update my example. Yes you got it right. Mouse effect should work when hovering over text. I tried to do it using z-index but it didn't work. When I try pointer-events:none, I cannot select the articles. They solved this problem on the site I gave an example, but I couldn't find how to do it. I would be very happy if you could help me with this.
Copy linkTweet thisAlerts:
@SempervivumMar 09.2022 — I tried `pointer-events: none;` too but this didn't work for me, the canvas doesn't react on movements when the mouse is over the text containers. Currently I'm a bit helpless.
Copy linkTweet thisAlerts:
@SempervivumMar 09.2022 — Seems to me that I found a solution: Omit `pointer-events: none;` and forward the event "mousemove" by use of dispatchEvent:

https://codepen.io/Sempervivum/pen/bGYPXJg

This helped me make this work by cloning the event:

https://stackoverflow.com/questions/11974262/how-to-clone-or-re-dispatch-dom-events
Copy linkTweet thisAlerts:
@mrtsrdsauthorMar 10.2022 — @Sempervivum Thank you. Save my life. I've been trying to solve this for 2 days.
×

Success!

Help @mrtsrds spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 12.9,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @bahaedd,
tipped: article
amount: 1000 SATS,

tipper: @Balmasexy,
tipped: article
amount: 1000 SATS,

tipper: @mbsaad,
tipped: article
amount: 1000 SATS,
)...