Question

是否可以调整使用自定义图像URL的CSS鼠标光标？例如：

cursor: 'url(resources/images/custom-cursor.png), auto';

图片太大，我无法找到一种方法来设置图片网址。我知道我可以用新的尺寸保存图像，但如果可能的话，我宁愿在客户端上设置尺寸。

Answer 1

选中它，我猜不可能原生地更改光标的大小。您可以做的一件事是使用以下代码隐藏光标：

cursor: none;

使用跟随光标的图像，并使用CSS为其width和height设置样式。这是一般做法。

刚试了一下：

$(function () {
  $("#testarea").mousemove(function (e) {
    $(".cursor").show().css({
      "left": e.clientX,
      "top": e.clientY
    });
  }).mouseout(function () {
    $(".cursor").hide();
  });
});

#testarea {
  border: 1px dashed #ccc;
  height: 100px;
  cursor: none;
}
.cursor {
  position: absolute;
  width: 25px;
  height: 25px;
  left: -100px;
  cursor: none;
  pointer-events: none;
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div id="testarea"></div>
<img src="//placehold.it/200?text=Cursor" alt="Cursor" class="cursor" />

Answer 2

我自己只是尝试自定义游标，我使用Inkscape制作它们，然后将它们导出为png文件。在Inkscape中导出它们时，Image Size部分中有一些选项可用于为导出的png图像设置width和height。我尝试了各种尺寸范围（64x64 / 48x48 / 16x16像素），直到我达到32x32像素的最佳点。正如您可能已经猜到的那样，64x64px有点大，所以我选择了32x32px。因此，如果需要，您可以在Inkscape或任何其他工具中更改大小。

注意 - 如果您要使用Inkscape，请注意当您更改此图像尺寸时，您的高度或宽度尺寸可能会略有改变，具体取决于您的图像。例如，当我将高度设置为32px然后继续将宽度设置为32px时，Inkscape会自动将高度更改为30px。这可能是为了保持宽高比或其他东西（我不确定），但导出的图像很好。您也可以将units更改为pixels，并在Hide all except selected选项上打勾。

调整CSS自定义鼠标光标的大小

2 个答案: