如何將圖標附加到光標？

Question

我知道如何創建自定義游標，

cursor: url('custom.svg'), default;

但是如何將圖標附加到現有指針光標？

Answer 1

你可以試試這樣的東西:)

 $(document).ready(function(){ $('html').mousemove(function(e){ var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; $('div.movablediv').css({'top': y,'left': x}); }); }); 

 .movablediv {width:25px; height:25px; position:absolute; border:solid 1px #000} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="movablediv"></div> 

Answer 2

如果您不想為游標使用自定義圖像，則可以使用JavaScript。 這是jQuery的一個例子

 $(function() { $(document).mousemove(function(e) { var iconPosition = { top: e.pageY + 12, left: e.pageX + 12 }; $('.cursor-icon').offset(iconPosition); }); }); 

 .cursor-icon { z-index: 1000; color: red; font-size: 2em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <span class="cursor-icon"><i class="fa fa-heart" aria-hidden="true"></i></span>