更改自定义 svg 的光标不起作用

Question

我正在为鼠标光标设计不同的 SVG 图像，但似乎遗漏了一些明显的东西。这是一个带有简单 PNG 圆圈的最小示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Cursor</title>

  <style>
    .hoverText {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 40%;
      text-align: center;
    }
    
    .hoverText:hover {
      cursor: url('circle.png'), pointer;
    }
  </style>
</head>

<body>
  <div class="hoverText">Test</div>
</body>

</html>

感谢您的帮助！

Answer 1

如这里所写：Using external images for CSS custom cursors
原因可能是你的图片太大了
尝试使用 15x15 像素大小：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Cursor</title>

  <style>
    .hoverText {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 40%;
      text-align: center;
    }
    
    .hoverText:hover {
      cursor: url('https://i.stack.imgur.com/inwsy.png'), pointer;
    }
  </style>
</head>

<body>
  <div class="hoverText">Test</div>
</body>

</html>

更改自定义 svg 的光标不起作用

Changing cursor for custom svg does not work

html

css

cursor