CSS可以修改鼠标样式,即将鼠标移到元素上时,自动切换为其他样式或者自定义图片。
设置属性cursor为各种鼠标形态(把鼠标移到标签上看效果):
标签 | 对应形态 |
---|---|
auto | 自动选择 |
crosshair | 十字选择模式 |
default | 默认图标 |
e-resize | 右侧拉伸 |
help | 帮助图标 |
move | 十字移动图标 |
n-resize | 上测拉伸 |
ne-resize | 右上拉伸 |
nw-resize | 左上图标 |
pointer | 手指图标 |
progress |
默认图标加加载图标 |
s-resize |
下侧拉伸 |
se-resize |
右下拉伸 |
sw-resize |
左下拉伸 |
text |
文本选择 |
w-resize |
左侧拉伸 |
wait |
加载中(沙漏和转圈) |
url() |
自定义图标(cur文件) |
源代码:
<span style="cursor:auto">auto</span>
<span style="cursor:crosshair">crosshair</span>
<span style="cursor:default">default</span>
<span style="cursor:e-resize">e-resize</span>
<span style="cursor:help">help</span>
<span style="cursor:move">move</span>
<span style="cursor:n-resize">n-resize</span>
<span style="cursor:ne-resize">ne-resize</span>
<span style="cursor:nw-resize">nw-resize</span>
<span style="cursor:pointer">pointer</span>
<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>
<span style="cursor:url()">url</span><br>
标签:拉伸,鼠标,自定义,样式,CSS,resize,图标 来源: https://www.cnblogs.com/ofnoname/p/16495369.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。