Arturo_hernandez Posted July 26, 2022 Share Posted July 26, 2022 Site URL: https://megalodon-trout-7tbj.squarespace.com/ Hi, I'm using a code with CSS and JS to create a custom circular cursor taken from previous posts @Jprood ( In general it works pretty well, but in some elements the hover effect doesn't work: • The "plus" icon burguer • The accordion • The scrolling marquee • The form button. Could someone help me to fix it? Please!!! Thanks in advance Web: https://megalodon-trout-7tbj.squarespace.com/ Password: Temporary77 Link to comment
tuanphan Posted July 28, 2022 Share Posted July 28, 2022 Try adding this to Design > Custom CSS * { cursor: none !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Arturo_hernandez Posted July 28, 2022 Author Share Posted July 28, 2022 Hi and thanks for your answer but I already had that code included and the problem continue. I copy all the code here: In Design > Custom CSS @media ( hover: none ) { .cursor { display: none !important; } } * { cursor: none; } .cursor { --size: 10px; height: var( --size ); width: var( --size ); border-radius: 50%; pointer-events: none; position: absolute; transform: translate( -50%, -50% ); z-index: 99999999999; } .cursor.cursor-dot { background: #ffffff; /* This defines the color of the cursor */ mix-blend-mode: difference; /* Delete this line if you dont want the circle to invert */ transition: width 0.6s, height 0.6s, background-color 0.6s; transition-timing-function: ease-out; } .cursor-dot.active { --size: 50px; background-color: #ffffff; } In Settings > Advanced > Code Injection > HEADER. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> In Settings > Advanced > Code Injection > FOOTER. <script> $( ( ) => { $( 'body' ).prepend ( '<div class="cursor cursor-dot" style="left: 0px; top: 0px;">' ); $( window ).mousemove ( function ( e ) { $( '.cursor' ).css ( { left: e.pageX, top: e.pageY } ); } ); $( window ).mousemove ( function ( e ) { $( 'a' ).on ( 'mouseenter', function ( ) { $( '.cursor' ).addClass ( 'active' ); } ); } ); $( window ).mousemove ( function ( e ) { $( 'a' ).on ( 'mouseleave', function ( ) { $( '.cursor' ).removeClass ( 'active' ); } ); } ); } ); </script> Do you know any solution? Thanks Link to comment
tuanphan Posted July 30, 2022 Share Posted July 30, 2022 Try adding code I sent to top of Custom CSS box Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Arturo_hernandez Posted August 1, 2022 Author Share Posted August 1, 2022 I've done but the problem continues. Any solution? 🙏 Thanks Link to comment
tuanphan Posted August 4, 2022 Share Posted August 4, 2022 On 8/1/2022 at 2:40 PM, Arturo_hernandez said: I've done but the problem continues. Any solution? 🙏 Thanks It looks like you solved? I see burger icon/form button cursor is fine Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Arturo_hernandez Posted August 6, 2022 Author Share Posted August 6, 2022 No. The problem is the hover effect doesn't work when you are over:• The "plus" icon burguer• The accordion• The scrolling marquee• The form button. Link to comment
tuanphan Posted August 10, 2022 Share Posted August 10, 2022 On 8/6/2022 at 2:34 PM, Arturo_hernandez said: No. The problem is the hover effect doesn't work when you are over:• The "plus" icon burguer• The accordion• The scrolling marquee• The form button. It looks fine to me/ Chrome/Windows Video: https://www.loom.com/share/4fb1f9b246b74aedb9d75720d6d6defb Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Arturo_hernandez Posted August 22, 2022 Author Share Posted August 22, 2022 Hi Tuan, If you check the video you can see that the circle cursor doesn't grow (hover effect) in the indicated items. Can you help me with this? jasbrandstudio 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment