DEV Community

Custom Cursor with CSS and jQuery [Detailed]

Batuhan on January 21, 2020

Hey everyone! 2 days ago i posted I Built My Personal Website and one of the questions was What library did you use for the mouse pointer effect?. ...
Collapse
 
leob profile image
leob •

Man that's some clever stuff, the pointer/cursor effect is one of the most original and creative things I've seen for a long time. Amazing what you can do nowadays with just standard CSS and some Javascript. Didn't you consider "going all the way" and using vanilla Javascript instead of jQuery? Probably wouldn't even be that hard to do.

Collapse
 
b4two profile image
Batuhan •

thanks sir, i will try it with vanilla js next time

Collapse
 
leob profile image
leob •

Not saying that you have to, but I think it wouldn't be that hard, and it means you're doing all of this wizardry with only the things that are built in to the browser, no frameworks, no libraries ... how cool it that? And you're already 90% there.

Collapse
 
anteamens profile image
Anthony Eamens •

I signed up just to thank you for this, I have been looking to implement something similar and it's perfect! Thanks

Collapse
 
fren profile image
⚓ Carlos Faria •

mix-blend-mode not working for you on Chrome? Try adding this to your css

html{
  // Fix mix-blend-mode for cursor on chrome
  background: #fff;
}
Collapse
 
xcrap profile image
César Couto •

Any idea why the cursor doesn't move while scrolling?

Collapse
 
jeanlou86 profile image
jeanlou86 •

The cursor is blurry when hovering/scaling up on Safari.
Any fix for that?

Thanks!

Collapse
 
crycx profile image
crycx •

Nice one. Like the colors and style!

Collapse
 
njanadesign profile image
Noureddine JANA •

how can I do this in WordPress, I can't add an the div with its class in the body?

Collapse
 
jeffreywky profile image
K.Y. •

How do i add a second cursor that follows the main dot?

Collapse
 
thejudejoshua profile image
Jude Joshua •

Thank you so much for sharing this. Been struggling with a cursor effect for hours now but this was a great help!

Collapse
 
lagalga profile image
Heriberto Noguera • • Edited

Thank you ;)
I've got a problem that some elements are not triggering… they're on a modal content div… maybe is that the reason mouseenter() is not working?

Collapse
 
lagalga profile image
Heriberto Noguera •

I think i got it… maybe the JS is not loading one the new loaded modal content… so i've added a new code to that modal page with its specific target and now it works ;)

Collapse
 
alexandergrote profile image
Alexander Grote •

Thank you so much! Cursor doesn't scale when hover. Anyone know how to fix this?

readymag.com/grote.graphics/3400331/
Password: grote