Home Events! Entrance Everyone Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
December 10, 2024 - @894.65 (what is this?)
Forum activity rating: Two Stars Posts: 21/1k.beats Unread Topics | Unread Replies | My Stuff | Random Topic | Recent Posts    Start New Topic
News: :4u: ~~~~~~~~~~~  :4u:

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  HELP: Custom cursor that changes when you are pressing the mouse button


« previous next »
Pages: [1] Print
Author Topic: HELP: Custom cursor that changes when you are pressing the mouse button  (Read 1029 times)
Lulu Finks
Newbie
*


⛺︎ My Room

View Profile

First 1000 Members!Joined 2023!
« 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.


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.
Logged
Memory
Guest
« Reply #1 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/
« Last Edit: January 26, 2023 @188.68 by MamboGator » Logged
wris
Jr. Member ⚓︎
**


Safe when used as directed.

⛺︎ My Room

View Profile WWW

First 1000 Members!Joined 2022!
« Reply #2 on: January 27, 2023 @765.82 »

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)
Logged
Memory
Guest
« Reply #3 on: January 27, 2023 @981.34 »

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.
Logged
Lulu Finks
Newbie
*


⛺︎ My Room

View Profile

First 1000 Members!Joined 2023!
« Reply #4 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.
Logged
Pages: [1] Print 
« previous next »
 

Vaguely similar topics! (3)

Why do you watch YouTube?

Started by MelooonBoard ⛺︎ ∙ Cinema

Replies: 60
Views: 9024
Last post September 07, 2024 @193.80
by halcybutton
trying to upload a custom pet

Started by shellshiresBoard ☔︎ ∙ I need Help!

Replies: 1
Views: 1211
Last post September 24, 2022 @898.84
by Melooon
Underappreciated YouTube Channels You Want to Share

Started by MemoryBoard ⛺︎ ∙ Cinema

Replies: 64
Views: 7929
Last post October 09, 2024 @540.78
by xwindows

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines | Terms and Policies Forum Guide | Rules | RSS | WAP | Mobile


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi