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

Question

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

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

图像太大，我无法找到通过设置图像 URL 来设置其样式的方法。我知道我可以用新的尺寸保存图像，但如果可能的话，我宁愿在客户端上设置尺寸。

Answer 1

检查了一下，我想不可能本地改变光标的大小。您可以做的一件事是使用以下代码隐藏光标：

cursor: none;

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

刚刚尝试过一些东西：

cursor: none;

$(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;
}