[SOLVED] Setting the cursor in the element's default styles, or in element:hover?

Setting the cursor in the element's default styles, or in element:hover?

Is there any practical difference between the following two?

button {
  cursor: pointer;
}

And:

button:hover {
  cursor: pointer;
}

The MDN docs specifically state that:

The cursor CSS property specifies which mouse cursor to display when the mouse pointer is over an element.

So, is there any real difference? Should one be preferred over the other, or are they interchangeable?

Solution

Yes there is a difference, the first is defined when CSS is loaded but the second one will be defined only on the :hover. Visually we may not see a difference, but if you use an image as a cursor you may have a small delay if you define it on hover since you need to wait for image load.

button:hover {
  cursor:url(https://picsum.photos/90/90?image=1069) 5 5, help;
}

<button>wait for loading</button>

For the second example the image will be loaded before hovering (you can check the network tab of your browser to notice this):

button {
  cursor:url(https://picsum.photos/90/90?image=1062) 5 5, help;
}

<button>no need to wait for loading</button>

So better use the second one to avoid any delay and have the cursor ready when needed.