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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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
cat_not_kitty Posted February 13 Share Posted February 13 Hi all, Posting some solutions first and then following up with a finicky troubleshooting request! @Arturo_hernandez – not sure if you're still interested in these fixes as it's been a long time, but for folx working on debugging this particular custom cursor, I'm going to leave a few collected tidbits from across the forum/internet here in one place. Caveat: I'm not a developer or coder (in ANY way) but I've been steadily developing my comfort with integrating custom CSS, HTML, and JS as I build my website, and have managed to bring ideas to life and troubleshoot a ton of bugs using the forum, so it's high time I pay it forward. I've already expressed this elsewhere, but feel compelled to say it again: deep gratitude to power-contributors tuanphan, creedon, and Beyondspace for their indefatigable generosity and expertise. I've rarely even needed to ask them anything directly – every time I have an issue, one or all of them has/have already solved it for another member. I've used the following code to address these common issues (final code in full below): 1. Missing hover effect on burger menu icon, accordion item titles, carousel scroll buttons, form input fields (both single line and longer text blocks), and form buttons: Change the ('a') in both its JavaScript appearances to ( 'a, input, button, sqs-block-button-element, textarea' ) (Full disclosure that I took a bit of a break after troubleshooting this and a bunch of other issues across a number of days, so I can’t quite remember which individual item each addition is addressing, but this string as it is solves the listed problems for me!) To save you my headache: A quick warning the 'sqs-block-button-element', which prompts the hover effect for the form submit button, won't automatically show its results (like everything else does) within the non-preview Squarespace window that displays next to the CSS and Code Injection panel. It should show in preview mode, but I can't vouch for certain – best to visit your website in a Private/Incognito window to view your changes 🙂. 2. Cursor sticking to original location then jumping to new position on scroll: Change left: e.pageX, top: e.pageY to left: e.clientX, top: e.clientY in JavaScript Change position: absolute; to position: fixed; in CSS 3. All default cursors (arrow, pointer, select, etc.) displaying along with custom cursor: This was addressed for me by adding * { cursor: none !important; } to the top of my CSS, as @tuanphan offered above, even though I already had cursor:none appearing later in my CSS. So, my current code is... Add to CSS: /* Custom cursor */ //Removes default cursor * { cursor: none !important; } //Stops custom cursor from appearing on mobile @media ( hover: none ) { .cursor { display:none !important; } } .cursor { --size: 15px; //Change this value to set your initial cursor size height: var( --size ); width: var( --size ); border-radius: 50%; pointer-events: none; position: fixed; 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 don't want the circle to invert transition: width 0.3s, height 0.3s, background-color 0.3s; //This changes the speed of the hover transition transition-timing-function: ease-out; } .cursor-dot.active { --size: 75px; //Change this value to set your hover cursor size background-color: #ffffff; } //end custom cursor Add to Code Injection > Header: <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Add to Code Injection > Footer: <script> $( ( ) => { $( 'body' ).prepend ( '<div class="cursor cursor-dot" style="left: 0px; top: 0px;">' ); $( window ).mousemove ( function ( e ) { $( '.cursor' ).css ( { left: e.clientX, top: e.clientY } ); } ); $( window ).mousemove ( function ( e ) { $( 'a, input, button, sqs-block-button-element, textarea' ).on ( 'mouseenter', function ( ) { $( '.cursor' ).addClass ( 'active' ); } ); } ); $( window ).mousemove ( function ( e ) { $( 'a, input, button, sqs-block-button-element, textarea' ).on ( 'mouseleave', function ( ) { $( '.cursor' ).removeClass ( 'active' ); } ); } ); } ); </script> Now for the troubleshooting request! 1. In Chrome, the default (arrow) cursor is still showing momentarily after a link to another page has been clicked: Cursor issue in Chrome. 2. In Safari, the default (arrow) cursor is showing when a link is clicked; remaining visible for the entire duration of time between the click and the next page's load; and when next page loads, both the custom cursor AND the default cursor appear on the page until the cursor is moved: Cursor issue in Safari. Website: https://radicalhealing.ca No password I've scoured the forum and beyond for solutions and have some thoughts that I don't know how to address in code...will wait to share them as this might be really easy to solve and I don't want to make this post even longer! moonlitdesign 1 Link to comment
cat_not_kitty Posted February 18 Share Posted February 18 (edited) On 2/13/2024 at 6:05 PM, cat_not_kitty said: 1. In Chrome, the default (arrow) cursor is still showing momentarily after a link to another page has been clicked: Cursor issue in Chrome. 2. In Safari, the default (arrow) cursor is showing when a link is clicked; remaining visible for the entire duration of time between the click and the next page's load; and when next page loads, both the custom cursor AND the default cursor appear on the page until the cursor is moved: Cursor issue in Safari. Website: https://radicalhealing.ca No password I've scoured the forum and beyond for solutions and have some thoughts that I don't know how to address in code...will wait to share them as this might be really easy to solve and I don't want to make this post even longer! I've removed the cursor for now, as it wasn't looking as polished as I'd want with these remaining issues, but I'm still hoping that I might be able to find a solution to the above glitches. Would you have any thoughts @tuanphan, @creedon, or @Beyondspace? Could adding an event listener for 'unload' (and/or some other event that happens after a link is clicked and when a page loads) help? (As I said – I'm not a developer, so forgive me if this is a very silly question ☺️!) Or could modifying any of these solutions work: https://stackoverflow.com/questions/3734559/change-cursor-when-loading-page? When I was having a go at troubleshooting everything before coming to the forum, I also tried adding (drawing from the solution found here: https://stackoverflow.com/questions/28823987/is-there-any-way-to-make-the-cursor-pointer-for-all-onclick-events-in-the-page: a:active { cursor: none important!; } and [onClick] { cursor:none !important; } to my CSS but neither of these fixed any of the problems. I also had the thought that adding some of the code here PLUS adding a blank image as a secondary custom cursor (thereby replacing the arrow that's appearing from some existing code) might work in combination to address everything, but I'm out of my league in terms of deciphering how to realise any of these solutions fully. Any chance something here moves in the right direction? Edited February 18 by cat_not_kitty 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