调整CSS自定义鼠标光标的大小 [英] Resizing CSS custom mouse cursor

问题描述

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

Is it possible to resize a CSS mouse cursor that uses a custom image URL? For example:

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

图片太大，我还没办法找到样式设置图片网址。我知道我可以将图像保存为新的大小，但是我希望在客户端上设置该大小。

The image is too big, and I haven't been able to find a way to style it past setting the image URL. I know I can just save the image with a new size, but I'd rather set the size on the client if possible.

推荐答案

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

Checked it, I guess it is not possible to natively change the cursor's size. One thing you can do is to hide the cursor using the following code:

cursor: none;

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

And use an image, which follows the cursor, and style it using CSS, for its width and height. This is the general practise.

只需尝试一下：

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

这篇关于调整CSS自定义鼠标光标的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！