将光标设置为元素的默认样式，还是 element:hover？

Question

下面这两个有什么实际区别吗？

button {
  cursor: pointer;
}

并且：

button:hover {
  cursor: pointer;
}

The MDN docs 特别说明：

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

所以，有什么真正的区别吗？应该优先选择另一个，还是可以互换？

Answer 1

是的，有区别，第一个是在加载 CSS 时定义的，而第二个将在仅上定义 :hover。在视觉上我们可能看不出有什么不同，但是如果您使用图像作为光标，如果您在悬停时定义它，则可能会有一个小的延迟，因为您需要等待图像加载。

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

<button>wait for loading</button>

对于第二个示例，图像将在悬停之前加载（您可以检查浏览器的网络选项卡以注意到这一点）：

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

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

所以最好使用第二个以避免任何延迟，并在需要时准备好光标。

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