9

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?

Lucas
  • 16,930
  • 31
  • 110
  • 182
  • 2
    there's no difference. But if you don't have any other styles that you want to set on `hover` then you could write the cursor style on the default state. So you don't write a hover state just for the cursor style. – Mihai T Jul 16 '18 at 08:12

1 Answers1

13

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.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415