如何将图标附加到光标上？

Question

我知道如何创建自定义光标。

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

但是您如何将图标附加到现有的指针光标上呢？

- user3607282

---

你可以制作自己的图标并替换默认图标。请查看http://jsfiddle.net/wNKcU/5/。 - Ali Zia

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>

- Dhaval Pankhaniya

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>

- sol