将光标设置为元素的默认样式或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;
}

并且:

button:hover {
  cursor: pointer;
}

MDN文档特别声明:

cursor CSS属性指定当鼠标指针悬停在元素上时要显示哪个鼠标光标.

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?

推荐答案

是的，有区别，第一个是在加载CSS时定义的，而第二个是在 only 定义的>.从视觉上看，我们可能看不到差异，但是如果您将图像用作光标，则在悬停时定义图像时可能会稍有延迟，因为您需要等待图像加载.

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.

这篇关于将光标设置为元素的默认样式或element:hover?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！