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

Question

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

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

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

Answer 1

检查了一下，我猜想本地无法更改光标的大小。您可以做的一件事是使用以下代码隐藏光标:

cursor: none;

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

刚刚尝试了一些东西:

$(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" />