Jump to content

Custom Curser bugs

Go to solution Solved by SquareRefresh,

Recommended Posts

Site URL: https://www.korenshadmi.com/

Hello

I have made a custom curser (pink curser on hover) and the same one in black for normal scrolling.

Although most of the time it works perfectly well on Safari Browser on Chrome there are usually the following bugs:

The curser shortly appears as a magnifying glass (for a millisecond) or that the hover function doesn’t work sometimes and the curser stays black.  

Here is the code that I used (CSS):

body {
margin: 0;
height: 100vh;
cursor: url(https://static1.squarespace.com/static/6177faa906333b0e6c0f5f76/t/6195788ed4d7cb6f0a0b331e/1637185678241/normal.png), auto;
}

 a:hover{
   cursor: url(https://static1.squarespace.com/static/6177faa906333b0e6c0f5f76/t/61957853363c352f320a07cb/1637185619935/pink.png), auto;}

Here is the Website.

Thank you!

Link to comment
34 minutes ago, Koren said:

Hello

I have made a custom curser (pink curser on hover) and the same one in black for normal scrolling.

Although most of the time it works perfectly well on Safari Browser on Chrome there are usually the following bugs:

The curser shortly appears as a magnifying glass (for a millisecond) or that the hover function doesn’t work sometimes and the curser stays black.  

Here is the code that I used (CSS):

body {
margin: 0;
height: 100vh;
cursor: url(https://static1.squarespace.com/static/6177faa906333b0e6c0f5f76/t/6195788ed4d7cb6f0a0b331e/1637185678241/normal.png), auto;
}

 a:hover{
   cursor: url(https://static1.squarespace.com/static/6177faa906333b0e6c0f5f76/t/61957853363c352f320a07cb/1637185619935/pink.png), auto;}

Here is the Website.

Thank you!

Hey @Koren try to add next code in custom CSS:

.gallery-masonry-lightbox-link {
  cursor: none;
}

and remove ":hover" after "a" tag"

a {
   cursor: url(https://static1.squarespace.com/static/6177faa906333b0e6c0f5f76/t/61957853363c352f320a07cb/1637185619935/pink.png), auto;
}

Let me know if it work!

SquareRefresh, premium plugins & templates that have an elevated feel.

Plugins: Have your site stand out. 
Templates: Our templates are designed with versatility in mind.
Get Freebies: Sometimes things in life are free. Browser our hand selected free plugins.

Link to comment
2 minutes ago, Koren said:

Hey @SquareRefresh Thank you ! But it seems to take away the cursor when I hover over the pictures.

Replace:

a {
   cursor: url(https://static1.squarespace.com/static/6177faa906333b0e6c0f5f76/t/61957853363c352f320a07cb/1637185619935/pink.png), auto;
}

To:

a {
   cursor: url(https://static1.squarespace.com/static/6177faa906333b0e6c0f5f76/t/61957853363c352f320a07cb/1637185619935/pink.png), auto !important;
}

SquareRefresh, premium plugins & templates that have an elevated feel.

Plugins: Have your site stand out. 
Templates: Our templates are designed with versatility in mind.
Get Freebies: Sometimes things in life are free. Browser our hand selected free plugins.

Link to comment
  • Solution
19 hours ago, Koren said:

@SquareRefresh I still have one question left:

In the gallery preview, when I hover over the arrows I still have a hand instead a pink arrow. can I fix it somehow ?

I attached a picture for explanation

Thank you!

Hey, try to change a code to next:

a,
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
   cursor: url(https://static1.squarespace.com/static/6177faa906333b0e6c0f5f76/t/61957853363c352f320a07cb/1637185619935/pink.png), auto !important;
}

 

Edited by SquareRefresh

SquareRefresh, premium plugins & templates that have an elevated feel.

Plugins: Have your site stand out. 
Templates: Our templates are designed with versatility in mind.
Get Freebies: Sometimes things in life are free. Browser our hand selected free plugins.

Link to comment
1 hour ago, Koren said:

Hey @SquareRefresh

First of all: Thank you so much for the help!

It seems to work really with the arrows but again to pointer disappears when hovering on the pictures in the gallery

Thank you! 

oh, yeah sorry, just add !important after "auto". I just edit my code.

Edited by SquareRefresh

SquareRefresh, premium plugins & templates that have an elevated feel.

Plugins: Have your site stand out. 
Templates: Our templates are designed with versatility in mind.
Get Freebies: Sometimes things in life are free. Browser our hand selected free plugins.

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.