如何将图标附加到光标？

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>