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

Question

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?

Answer 1

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>