Custom Curser on all rollovers including arrows

I have added a custom cursor to my site, but it goes back to hands when on the arrow rollover and on the accordion section. Is there code to make the curser work on all rollover assets?

https://helicon-cardioid-tcx8.squarespace.com/about-1
PW: studionh_ap

Don't remove any code in your code.

Use this code to Website Tools (under Not Linked) > Custom CSS.

body * {
     cursor: url(https://static1.squarespace.com/static/666aee40f9ad2a6a51704a9e/t/6672efce8f7dfa554ca97ab8/1718808526491/Curser_Pink.png),auto
}

That has worked for the curser not changing to the hand icon on the accordion, but isn't showing the hover colour change? This is also the case on the social icons and home button logo now too?

Also, how do I add a .svg file as the cursor, as it's looking pixelated when enlarged slightly? I found a tutorial but when I paste the code from the 'Inpect / Elements' section it doesn't work.

I see you removed all cursor icon url from the code. Do you still need help?

You can upload svg via Custom CSS box, then add svg url to code.

Hi, when I add the svg code to the curser code it doesn't show? Am I missing something?
 

/* Custon curser */

body {

margin: 0;

height: 100vh;

cursor: url(<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<circle cx="10" cy="10" r="10"/>
</svg>), auto;

}

 a:hover{

cursor: url(<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<circle cx="10" cy="10" r="10"/>
</svg>), auto;

}

body * {
     cursor: url(<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<circle cx="10" cy="10" r="10"/>
</svg>),auto
}

Because you used incorrect url. SVG in your code is

CODE

NOT

URL.

Access Custom CSS > Click Custom File > Upload your svg file > Then after finished upload >> click on svg >> URL will paste to CSS box >> Cut this URL and paste to code

It won't let me upload an .svg file?

On 7/3/2024 at 5:27 PM, maboli said:

It won't let me upload an .svg file?

You can add a page in Not Linked > Add a text block > add a text > Highlight it > Click Link icon > Click Gear icon > Upload your svg file.

After upload, it will show file url under svg file name.