Resizing CSS custom mouse cursor

问题

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.

回答1:

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;

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

Just tried something:

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

回答2:

I was just trying custom cursors myself and I used Inkscape to make them, then exported them as png files. While exporting them in Inkscape, there are a few options in Image Size section where you can set width and height for your exported png image. I tried various size ranges (64x64/48x48/16x16 pixels) until I hit the sweet spot of 32x32 pixels. And as you might have guessed, 64x64px was kinda huge so I settled with 32x32px. So you can change the size that way in Inkscape or any other tool if you want.

Note - If you are going to use Inkscape, note that your height or width dimensions might change a little bit depending upon your image when you are changing this image size. Like for example, when I set height to 32px and then went on to set width to 32px, Inkscape automatically changed the height to 30px. This was may be to maintain aspect ratio or something (I'm not sure), but the exported image was just fine. You also might wanna change the units there to pixels and may be tick on Hide all except selected option.

来源：https://stackoverflow.com/questions/41248257/resizing-css-custom-mouse-cursor

标签

css

image

cursor