HELP: Custom cursor that changes when you are pressing the mouse button - ☔︎ ∙ I need Help! - MelonLand Forum

• HELP: Custom cursor that changes when you are pressing the mouse button
  Posted by Lulu Finks on 26 Jan, 2023 04:12
• Hello,
  
  I am enthused by the web 1.0 experience and wish to participate by making my own website, on the hosting service Neocities. One of the customizations on my website is a custom cursor of an Among Us, which I managed to implement with little difficulty. However, I have unchecked ambitions and wish to add a little flair to the Among Us: I remember in the old days of the internet, there were some very cool custom cursors that had their own unique click animation. When someone presses the mouse button on my website, I would like to change the jpeg of my Among Us to one of a different color for the duration of the click. I believe the tactile experience of clicking combined with the bright color of the Among Us will give the user a shocking, yet pleasant experience.
  
  
  Not clicking
  
  
  Clicking
  
  Surprisingly, I have not been able to find a way to do this. There are ways to change the cursor when you hover a link or text, but none specifically for clicking. Is this not possible? Or is it more complex than simple CSS? Would appreciate any help. I do not want to sacrifice my creative dreams.
• #1 Reply
  Posted by Memory on 26 Jan, 2023 04:21
• You'll need a little bit of Javascript. Here's a stack overflow thread that appears to outline what you're trying to do.
  
  https://stackoverflow.com/questions/17117004/how-to-change-mouse-cursor-on-mousedown-event
  
  They're using jquery, which is a great library that makes Javascript a lot easier to use.
  
  https://learn.jquery.com/about-jquery/how-jquery-works/
• #2 Reply
  Posted by wris on 27 Jan, 2023 18:22
• You can do this with CSS using the CSS :active psuedo-class.
  
  

  Code

  html {
   cursor: url(https://ani.cursors-4u.net/games/images16/gam1564.png), auto;
  }
  
  *:active {
   cursor: url(https://ani.cursors-4u.net/games/images16/gam1567.png), auto;
  }
  

  
  Example: https://codepen.i:ha:jsrn/pen/RwBJxjK (tested on Firefox on MacOS)
• #3 Reply
  Posted by Memory on 27 Jan, 2023 23:33
• Quote from: wris on 27 Jan, 2023 18:22

  You can do this with CSS using the CSS :active psuedo-class.
  
  

  Code

  html {
   cursor: url(https://ani.cursors-4u.net/games/images16/gam1564.png), auto;
  }
  
  *:active {
   cursor: url(https://ani.cursors-4u.net/games/images16/gam1567.png), auto;
  }
  

  
  Example: https://codepen.i:ha:jsrn/pen/RwBJxjK (tested on Firefox on MacOS)
  

  
  Oh daaaang. I got schooled today. That's so elegant.
• #4 Reply
  Posted by Lulu Finks on 29 Jan, 2023 00:02
• Thank you for the help, both you guys. The code from wris worked almost exactly, but the cursor still would change to a pointer, grab, etc, whenever I hovered a link or did anything else that results in a different cursor. I personally didn't want it to do this, and after a bit of literal complete guesswork fooling around I ended up with:
  
  

  Code

  * {
   cursor: url(https://ani.cursors-4u.net/games/gam-16/gam1564.cur), default;
  }
  
  *:active {
   cursor: url(https://ani.cursors-4u.net/games/gam-16/gam1567.cur), default;
  }

  
  This keeps the cursor from ever being anything but amongus, so far as I've tested it. Figured I'd post it here in case anyone wants to do the same thing.