Skip to content

Instantly share code, notes, and snippets.

@fabio914

fabio914/test-cursor-hover-css.md

Last active October 1, 2023 09:07
Show Gist options
  • Save fabio914/13d8150bbe3c3051a61fbeed6153a746 to your computer and use it in GitHub Desktop.
Save fabio914/13d8150bbe3c3051a61fbeed6153a746 to your computer and use it in GitHub Desktop.
Download ZIP
Different cursor when hovering
Raw
test-cursor-hover-css.md

👋 this is how you can test this other cursor:

open Google Chrome, navigate to the website, then click on View > Developer > Inspect elements (or press ⌥⌘I). then under Elements, select the Styles tab in the right pane then click on the + button close to the Filter field

image1

and add the css below:

a:hover, #surprise-door:hover, .small-frog:hover {
    cursor: url(https://cdn.shopify.com/s/files/1/0570/7815/3306/files/clicky_cursor.png), auto !important;
}

you will need to type the first line first (a:hover, #surprise-door:hover, .small-frog:hover) then click once

image2

and then click again inside the box with that style to add the line with the cursor.

image3

also, make sure that this button in the top left corner of the window isn't blue (or else you won't be able to see the cursor), if it's blue then click on it to disable it.

image4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment