CSS cursor property not changing when class is assigned to divs

Question

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 class="item noclick" onclick="window.location = '/example/unavailable';">
  <img class="noclick" src="example/example.png">
  <div class="itemtext noclick">
    <p class="title noclick">example<span> - example</span></p>
    <p class="date noclick">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.

Use the [<>] button in the SO editor to make your code execute as an SO snippet. Makes it easier for us to copy and play with, tnx — Danny '365CSI' Engelman, May 03 '22 at 19:37
added these things, thanks for letting me know about the snippet thing i had no idea — Joshua_B., May 03 '22 at 19:50

score 0 · Answer 1 · answered May 03 '22 at 18:15

0

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

answered May 03 '22 at 18:15

Chris Schober

176
5

Yeah i'm aware of this, my cursors are 16x16, i learned that the hard way before – Joshua_B. May 03 '22 at 19:26

score 0 · Answer 2 · answered May 03 '22 at 22:35

0

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;
}

answered May 03 '22 at 22:35

Joshua_B.

21
1
3

CSS cursor property not changing when class is assigned to divs

2 Answers2