html - 如何增加自定义光标图像的大小？

Question

我想增加用作光标的图像的大小。

目前我无法放置超过 128 x 128 的图像。

但我想把它放得更大。

那么如何做到这一点呢？

我正在使用

cursor: url(hand.png), auto;

Answer 1

如果需要，您可以组合 css + jQuery，即使组合它们并不总是完美的:

JSFiddle 示例:

http://jsfiddle.net/n4Zbr/258/

本地示例:

$(function(){
  var $cursor = $('#huge-cursor');
  $(document).bind('mousemove',function(e){
    $cursor.css({
      left: e.clientX - 15,
      top:  e.clientY - 15,
    });
  });
});

body, html {
  width: 100%;
  height: 100%;
  margin:0; padding:0;
  cursor: url("data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"), auto;
}
#huge-cursor {
  position: fixed;
  border-radius: 10% 90% 50% 50% / 10% 50% 50% 90%;
  background: yellow;
  width: 200px; height: 200px;
  border: 4px solid pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="huge-cursor"></div>
<br><br><br><br><br><br><br><br><br><br><br>LONG<br><br><br><br><br><br><br><br><br><br>CONTENT
<br><br><br><br><br><br><br><br><br><br><br>LONG<br><br><br><br><br><br><br><br><br><br>CONTENT
<br><br><br><br><br><br><br><br><br><br><br>LONG<br><br><br><br><br><br><br><br><br><br>CONTENT
<br><br><br><br><br><br><br><br><br><br><br>LONG<br><br><br><br><br><br><br><br><br><br>CONTENT
<br><br><br><br><br><br><br><br><br><br><br>LONG<br><br><br><br><br><br><br><br><br><br>CONTENT