CSS cursor property not changing when class is assigned to divs-CodePudding

Below is the CSS and HTML for the custom cursors I have, when I apply the classes to divs the cursors do not show.

If anyone wants to take a look at the SVG file as well I've linked it here

* {
  cursor: url(../assets/cdefault.svg), auto;
}

.noclick {
  cursor: url(../assets/cno.svg), 8 8, move !important;
}

.select {
  cursor: url(../assets/cselect.svg), auto !important;
}

.text {
  cursor: url(../assets/ctext.svg), 8 8, move !important;
}

.itemtext {
  width: 40vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  color: white;
}

.item {
  width: 40vw;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-style: solid;
  border-width: 0.1rem;
  background-color: black;
  border-color: white;
  border-radius: 10px;
  transform: scale(1);
}

.item img {
  width: 40vw;
  border-radius: 0.4rem 0.4rem 0rem 0rem;
}

<div  onclick="window.location = '/example/unavailable';">
  <img  src="example/example.png">
  <div >
    <p >example<span> - example</span></p>
    <p >example</p>
  </div>
</div>

To clarify, the global cursor cdefault.svg, does show across the whole page, in this example the noclick class does not want to appear when hovering over the specified elements.

EDIT Just as clarification, my cursors are all 16x16px and have worked when applied to classes individually. I have also tried using PNGs instead of SVGs but has not changed anything.

CodePudding user response：

Please make sure the svg files are within 32 x 32px which is the size limit for most browsers. Otherwise the browser ignores your custom cursor file. There are similar answers for example here

CodePudding user response：

Figured out what I was doing wrong! I shouldn't have been placing the comma after the svg url. Below is the fixed CSS

.noclick {
  cursor: url(../assets/cno.svg) 8 8, auto;
}