将光标设置在元素的默认样式或元素中:hover？

Question

以下两个之间有什么实际区别吗？

button {
  cursor: pointer;
}

和:

button:hover {
  cursor: pointer;
}

MDN文档明确指出:

的cursorCSS属性指定要显示的鼠标光标,当鼠标指针悬停的元素.

那么,有什么真正的区别吗？一个人应该优先于另一个,还是可以互换？

Answer 1

是的,有一个区别,第一个是在加载CSS时定义的,而第二个是仅在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>

因此,最好使用第二个来避免任何延迟,并在需要时准备好光标.