DEV Community

Discussion on: Use emojis as cursors

Collapse
 
kyleakelly profile image
Kyle Kelly

Hi GV,

I'm glad it's working well for you!

That definitely can be done. What you'll want to do is wrap the cursor css in with a hover.

For example, instead of placing the cursor code in the body like this:

body {
cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>😀</text></svg>") 16 0,auto; 
}

Use this:

a:hover {
cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>😀</text></svg>") 16 0,auto; 
}

You could also make it more specific, like if you only wanted it to work on hovered links in one particular div with a class called 'emoji':

.emoji a:hover {
cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>😀</text></svg>") 16 0,auto; 
}

Hope that helps!

Collapse
 
s_bulia profile image
GV

Thank you so much!!! it works in the preview, although when I try to publish it tells me that "Markup is not allowed in CSS." - I wonder if I'm putting this code in the right section, at the moment I'm inserting it in the Css?

Thread Thread
 
kyleakelly profile image
Kyle Kelly

Is this with WordPress or Squarespace, or something different? Each have their unique quirks, and it's also possible it's not doable with the system you're using.

Thread Thread
 
s_bulia profile image
GV

oh right I see, I'm using Semplice, a template for wordpress.

Thread Thread
 
kyleakelly profile image
Kyle Kelly

I haven't used that particular theme, but if you go to Appearance -> Customize, once that loads at the bottom of the left bar there should be an 'Additional CSS' option. Place the cursor css in there, and that should work.