以下两者之间有什么实际区别吗?
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.
那么,有什么真正的区别吗?应该优先选择另一个,还是可以互换?
最佳答案
是的,有区别,第一个是在加载 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? 中设置光标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51357279/