Changing cursor for custom svg does not work

Question

I am designing different SVG images for my mouse cursor, but it seems that I am missing something obvious. Here is a minimal example with a simple PNG circle:

<!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>

Thank you for your help!

Does this answer your question? [Using external images for CSS custom cursors](https://stackoverflow.com/questions/18551277/using-external-images-for-css-custom-cursors) — ATP, Mar 01 '21 at 19:23

score 0 · Accepted Answer · answered Mar 01 '21 at 19:26

As written here : Using external images for CSS custom cursors
the reason is probably because your image is too big.
try this with 15x15 px size:

<!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>

Thank you very much for your time! I had no idea of the size restriction. — Johnathan, Mar 01 '21 at 19:51

Changing cursor for custom svg does not work

1 Answers1

Linked