Using External Images For CSS Custom Cursors

Using external images for CSS custom cursors

It wasn't working because your image was too big - there are restrictions on the image dimensions. In Firefox, for example, the size limit is 128x128px. See this page for more details.

Additionally, you also have to add in auto.

jsFiddle demo here - note that's an actual image, and not a default cursor.

.test {
  background:gray;
  width:200px;
  height:200px;
  cursor:url(http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif), auto;
}

<div class="test">TEST</div>

custom cursor image not changing for mouseover html5 canvas

There are restrictions on the size and dimensions of the image you can use for custom cursor, the restrictions are browser dependent. (Firefox only allows 128*128px).
Check the following URL:
Using URL values for the cursor property

Please check if the following thread helps you solve your problem or answers your question:
Using external images for CSS custom cursors

Custom cursor image doesn't work in all IEs?

Unfortunately, cursor is plain buggy in IE, at least until and including 8

In Internet Explorer for Windows up to and including version 8, if a
relative URI value is specified in an external style sheet file the
base URI is considered to be the URI of the document containing the
element and not the URI of the style sheet in which the declaration
appears.

http://reference.sitepoint.com/css/cursor

You may want be able to use a conditional comment to target IE and then feed it a modified style rule with a different url.

Custom Cursor Image CSS

Your problem may be that cursor URLs don't work in Firefox for the Mac.

You can get the same effect on Firefox by using the -moz-zoom-in keyword.

cursor:url(/img/magnify.cur), -moz-zoom-in, auto;

This will show magnify.cur, the Mozilla-specific zoom cursor or a system default cursor. The first cursor on the list that the browser supports is used.

You can also see a list of cursor keywords supported by different browsers.

Changing cursor for custom svg does not work

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>

Replace all cursor in tailwindcss

The <url> value must be followed by a single keyword value:

/* URL with mandatory keyword fallback */
cursor: url(/images/cursor.png), pointer;

See: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#syntax

So, in your tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      cursor: {
        default: 'url(/images/cursor.png), default',
        pointer: 'url(/images/cursor.png), pointer',
      },
    },
  },
  plugins: [],
}

Demo: https://play.tailwindcss.com/Nz8Ur49ENq

If you want to replace the cursor for all the elements in the page, a solution might be:

*,
*:before,
*:after {
  @apply cursor-default;
}

Example: https://play.tailwindcss.com/XdgFOu86ix?file=css

Custom cursor not growing/scaling on hover (can't figure it out)

The codepen you are trying to copy links to external scripts and has been adapted to work inside codepen.

What I did to get the pen to work here (I think you only needed step 4):

For CSS & JS clicked down arrow top right, view compiled
Copy over all code
Settings>JS>External Scripts>Copy link into Stack Overflow snippet's external scripts
Removed 'window.CP' code junk which I assume is something to do with codepen and getting the window object of their sub-document

const $bigBall = document.querySelector('.cursor__ball--big');
const $smallBall = document.querySelector('.cursor__ball--small');
const $hoverables = document.querySelectorAll('.hoverable');

// Listeners
document.body.addEventListener('mousemove', onMouseMove);
for (let i = 0; i < $hoverables.length; i++) {
  $hoverables[i].addEventListener('mouseenter', onMouseHover);
  $hoverables[i].addEventListener('mouseleave', onMouseHoverOut);
}

// Move the cursor
function onMouseMove(e) {
  TweenMax.to($bigBall, .4, {
    x: e.pageX - 15,
    y: e.pageY - 15 });

  TweenMax.to($smallBall, .1, {
    x: e.pageX - 5,
    y: e.pageY - 7 });

}

// Hover an element
function onMouseHover() {
  TweenMax.to($bigBall, .3, {
    scale: 4 });

}
function onMouseHoverOut() {
  TweenMax.to($bigBall, .3, {
    scale: 1 });

}

body {
  height: 100vh;
  background: #010101;
  cursor: none;
  margin: 0;
  display: flex;
  font-family: monospace;
}
body h1,
body p,
body a {
  color: #fff;
}
body a {
  border-bottom: 2px solid #fff;
  padding: 10px 0;
  margin-top: 25px;
}
body .cursor {
  pointer-events: none;
}
body .cursor__ball {
  position: fixed;
  top: 0;
  left: 0;
  mix-blend-mode: difference;
  z-index: 1000;
}
body .cursor__ball circle {
  fill: #f7f8fa;
}
body .left,
body .right {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
body .right {
  background: #fff;
}
body .right a {
  border-bottom: 2px solid #000;
}
body .right h1,
body .right p,
body .right a {
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<div class="cursor">
  <div class="cursor__ball cursor__ball--big ">
    <svg height="30" width="30">
      <circle cx="15" cy="15" r="12" stroke-width="0"></circle>
    </svg>
  </div>

  <div class="cursor__ball cursor__ball--small">
    <svg height="10" width="10">
      <circle cx="5" cy="5" r="4" stroke-width="0"></circle>
    </svg>
  </div>
</div>

<div class="left">
  <h1>Hello</h1>
  <p>Check out this link:</p>
  <a class="hoverable">Hover meh</a>
</div>

<div class="right">
  <h1>Hello</h1>
  <p>Check out this link:</p>
  <a class="hoverable">Hover meh</a>
</div>

How to change the cursor when the user clicks?

You could simply use an onclick event listener on the body itself.

document.body.onmousedown = () => {  document.body.style.cursor = "not-allowed"}
document.body.onmouseup = () => {  document.body.style.cursor = `pointer`}

body {  height: 100vh;  background: aliceblue;  cursor: pointer;}

Using External Images For CSS Custom Cursors