MelonLand Forum

World Wild Web => ✁ ∙ Web Crafting => ☔︎ ∙ I need Help! => Topic started by: Lulu Finks on January 26, 2023 @175.23

Title: HELP: Custom cursor that changes when you are pressing the mouse button
Post by: Lulu Finks on January 26, 2023 @175.23

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.

(https://ani.cursors-4u.net/games/images16/gam1564.png)
Not clicking

(https://ani.cursors-4u.net/games/images16/gam1567.png)
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.

Title: Re: HELP: Custom cursor that changes when you are pressing the mouse button
Post by: Memory on January 26, 2023 @181.84

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/

Title: Re: HELP: Custom cursor that changes when you are pressing the mouse button
Post by: wris on January 27, 2023 @765.82

You can do this with CSS using the CSS :active psuedo-class (https://developer.mozilla.org/en-US/docs/Web/CSS/:active).

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)

Title: Re: HELP: Custom cursor that changes when you are pressing the mouse button
Post by: Memory on January 27, 2023 @981.34

Quote from: wris on January 27, 2023 @765.82

You can do this with CSS using the CSS :active psuedo-class (https://developer.mozilla.org/en-US/docs/Web/CSS/:active).

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.

Title: Re: HELP: Custom cursor that changes when you are pressing the mouse button
Post by: Lulu Finks on January 29, 2023 @1.56

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.