繁體
首页 >> 要闻 >

互联网常识：css怎么改变鼠标样式

2023-03-06 18:13:01 来源： 用户： 

跟大家讲解下有关css怎么改变鼠标样式，相信小伙伴们对这个话题应该也很关注吧，现在就为小伙伴们说说css怎么改变鼠标样式，小编也收集到了有关css怎么改变鼠标样式的相关资料，希望大家看到了会喜欢。

在css中，可以通过cursor属性来设置鼠标样式，语法格式“cursor:值;”。cursor属性用于规定要显示的光标的类型（形状），可以设置鼠标指针放在一个元素边界范围内时所用的光标形状。

本文操作环境：Windows7系统、HTML5&&CSS3版，DELL G3电脑

有些时候我们并不想加文字，图片以及链接，却想要加链接时的鼠标样式。这就用到了我们的css中的cursor来设置鼠标指针形状。

cursor属性规定要显示的光标的类型（形状）。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

下面就是鼠标指针cursor属性的一些属性值：

实例：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>请把鼠标移动到单词上：</p> <span style="cursor:auto">auto</span><br> <span style="cursor:crosshair">crosshair</span><br> <span style="cursor:default">default</span><br> <span style="cursor:e-resize">e-resize</span><br> <span style="cursor:help">help</span><br> <span style="cursor:move">move</span><br> <span style="cursor:n-resize">n-resize</span><br> <span style="cursor:ne-resize">ne-resize</span><br> <span style="cursor:nw-resize">nw-resize</span><br> <span style="cursor:pointer">pointer</span><br> <span style="cursor:progress">progress</span><br> <span style="cursor:s-resize">s-resize</span><br> <span style="cursor:se-resize">se-resize</span><br> <span style="cursor:sw-resize">sw-resize</span><br> <span style="cursor:text">text</span><br> <span style="cursor:w-resize">w-resize</span><br> <span style="cursor:wait">wait</span><br> </body> </html>

这样鼠标就变成我们需要的了。

说明：

还有一种用法其原理是：利用了CSS2的一个cursor的属性cursor：url (url)，鼠标文件可以使用jpg、gif、ani和cur多种文件格式。需要注意的这种方式只能在IE5.5以上浏览器中正常显示。

推荐学习：《css视频教程》

以上就是css怎么改变鼠标样式的详细内容，更多请关注php中文网其它相关文章！

来源：php中文网

　　免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。 如有侵权请联系删除！

 
分享：
相关阅读
 
最新文章
大家爱看
频道推荐
站长推荐

关于我们| 联系方式| 版权声明| 免责声明|