更改自定义 svg 的光标不起作用 [重复]答案

【问题标题】：Changing cursor for custom svg does not work [duplicate]更改自定义 svg 的光标不起作用 [重复]
【发布时间】：2021-03-02 03:26:22
【问题描述】：

我正在为我的鼠标光标设计不同的 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>

感谢您的帮助！

【问题讨论】：

这能回答你的问题吗？ Using external images for CSS custom cursors

标签： html css cursor

【解决方案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>

【讨论】：

非常感谢您的宝贵时间！我不知道尺寸限制。