Hi, I have the following custom cursor, everything works fine but it stops following the mouse when it enters an iframe. I have a couple I use for spline3d and embedded videos. I styled the cursor myself and chatgpt (please dont come for me) did the rest. I’ve tried adding a listening event inside iframes to point to parent but that did not work. New to front end customizations, would love any help! This is for a new project to replace my current site so I cant link to a live example.
body { cursor: none; } /* Hide the default cursor */ a { cursor: none !important; } /* Override cursor style for links */ .cursor { position: fixed; width: 16px; height: 16px; background-color: #ffffff; border-radius: 50%; pointer-events: none; z-index: 1000; mix-blend-mode: difference; /* Optional */ } @media (max-width: 768px) { .cursor { display: none; } } /* Hide custom cursor on mobile */well, the content of a iframe is out of the scope of the website its is implemented on. so you have to set up the customcursor also inside the iframe…
You cannot access/select elements inside an iframe with code executed on the mainpage.
@neueMeta hi! Yes I landed on this late last night and was able to have the cursor work inside an iframe after implementing the same cursor site code. However now im facing a double cursor effect. Would it be possible to have it hide when it’s inside iframe? I think thats readymags default approach.
Also wonder if what I want to achieve can be done by applying a mix blend mode directly to readymags custom uploaded cursor to avoid so much code?
hmm to use mix-blend mode here sounds a bit hacky here. You will run then in new problems and crossbrowser incompatibily. Wouldn´t recommend.
But why are you using a iframe? I would try to avoid it and the problem is gone…
At some point I thought my spline interactions needed to be in iframes… thats not the case! Was able to get rid of all the iframes and solved the issue. Thanks!
1 Like