如何增加自定义光标图像的大小?

时间:2011-12-10 10:04:41

标签: html css cursor

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

目前我无法将图像超过128个。

但我想把它放得更大。

那怎么办呢?

我正在使用

cursor: url(hand.png), auto;

3 个答案:

答案 0 :(得分: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

答案 1 :(得分:1)

您可以使用CSS(或JavaScript)来隐藏真实的&#39;光标。然后用新光标的背景和大小创建一个div,它将自己重新定位到“真实”的位置。每次鼠标移动时隐藏光标。基本上它看起来像一个真正的光标,但缺点是我不认为隐藏光标CSS属性在浏览器Opera中工作。如果您对此方法感兴趣,请告诉我,一旦我靠近电脑(不是在iPad上),我会将其发布。

答案 2 :(得分:0)

使用CSS?恐怕无法做到。我认为你应该尝试使用一些可以编辑图标文件并重新调整大小的软件。

相关问题