IT虾米网

CSS修改鼠标样式

EasonJim 2022年11月07日 编程语言 117 0

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> 

本文参考链接:https://www.cnblogs.com/ofnoname/p/16495369.html
评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

Java多线程中Lock锁如何使用