ユニコード絵文字をカーソルとして使用する

Question

ユニコード絵文字カーソルをイメージに変換しなくてもかまいませんか？ これは絵文字「☠️」 です。矢印を置き換えて、デフォルトのカーソルにしたいです。 イメージ（https://image.ibb.co/kSQHi6/cursor.png） を使用して動作しますが、イメージを使用したくありません。 PNG

を使用して

DEMO 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

私が以前に提案したJavascriptの解決策です。ここでは、マウスカーソルを隠し、その上に絵文字で要素を配置します。

パフォーマンス的には、十分であれば自分で決定する必要があります。

$(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>