Using Unicode Emoji as a Cursor [duplicate] - html

Question

This question already has an answer here:
Using HTML / UTF-8 character's as cursor
(1 answer)
Closed 5 years ago.
Is it possible to do have an Unicode Emoji cursor without having to convert it to an image?
This is the emoji "☠️"
, I want it to become the default cursor, replacing the arrow.
It works using the image (https://image.ibb.co/kSQHi6/cursor.png)
but I don't want to use an image.
DEMO using PNG
HTML
<div class="box"></div>
CSS
.box{
width: 250px;
height: 250px;
background: red;
cursor:url(https://image.ibb.co/kSQHi6/cursor.png), auto;
}
JSFIDDLE DEMO:https://jsfiddle.net/2zp1v56y/

Answer 1

Here's the Javascript solution I proposed earlier on, where I hid the mouse cursor and put an element on top of it with the emoji on it.
Performancewise you'll have to decide yourself if it suffices.
$(document).on('mousemove', function(e){
$('#cursor').css({
left: e.pageX,
top: e.pageY
});
});
.box{
width: 250px;
height: 250px;
background: red;
cursor: none;
}
.box:hover + #cursor {
display: block;
}
#cursor {
pointer-events: none;
position: absolute;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This is the emoji "☠️"</p>
<p>I want it to become the default cursor, replacing the arrow</p>
<p>
It works using the image (https://image.ibb.co/kSQHi6/cursor.png)
</p>
<div class="box"></div>
<div id="cursor">☠️</div>