如何将图标附加到光标？

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>