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

html – 将光标设置在元素的默认样式或元素中:hover?,第1张

概述以下两个之间有什么实际区别吗? 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 以下两个之间有什么实际区别吗?

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.

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

@R_502_6120@ 是的有区别,第一个是在加载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>

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

总结

以上是内存溢出为你收集整理的html – 将光标设置在元素的默认样式或元素中:hover?全部内容,希望文章能够帮你解决html – 将光标设置在元素的默认样式或元素中:hover?所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1074983.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)

保存