css cursor的作用

简介: css cursor的作用

Web开发中,cursor 是一个CSS属性,用于控制当鼠标指针悬停在一个元素上时显示的光标样式。通过设置不同的 cursor 值,可以改变用户在与网页进行交互时看到的光标形态,从而提升用户体验。


常用值及用途

1. default:

默认光标(通常是一个箭头)


2. pointer:

光标变为指针,通常用于可点击的链接或按钮


3. text:

光标变为文本选择光标,通常用于输入框或可选中文本区域


4. move:

光标变为移动光标,通常用于拖动对象


5. not-allowed:

光标变为一个禁止符号,表示某个操作不可用


6. wait:

光标变为等待光标,表示后台正在处理任务


7. crosshair:

光标变为十字准星,用于精确选择


8. col-resize:

光标变为水平双向箭头,表示可以水平调整大小


9. row-resize:

光标变为垂直双向箭头,表示可以垂直调整大小


10. grab:

光标变为一个手掌,表示可以抓取某个对象


11. grabbing:

光标变为一个抓紧的手掌,表示正在抓取某个对象


举例

.element {
    cursor: pointer; /* 使光标变为指针 */
}
目录
相关文章
|
5月前
|
前端开发 搜索推荐 UED
探索CSS中的cursor鼠标属性
探索CSS中的cursor鼠标属性
|
4月前
|
前端开发 JavaScript
使用CSS中的cursor属性值,常用的可设置参数,以及其他16中参数值的使用场景和示例代码
使用CSS中的cursor属性值,常用的可设置参数,以及其他16中参数值的使用场景和示例代码
61 0
|
6月前
|
前端开发 UED
CSS cursor的一些相关属性
CSS cursor的一些相关属性
|
Web App开发 前端开发 搜索推荐
利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标)
现而今,我们纵向的回顾整个大前端的历史,不难发现,人们对前端的审美要求越来越高,越来越严苛,与此同时,人们对追求美的体验是也极致的,从理性到感性,从平面到几何,从现实到虚拟,所以从某种角度来说,作为前端工程师,他们所追求的东西往往和人类软件核心理念南辕北辙,因为人类的终极追求是个性,绝不是共性,换句话说,大家都一样就不好玩儿了。
利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标)
|
前端开发
每日一学—CSS cursor 属性
每日学一点加强技术水平,夯实基础。 阅读这篇文章,一起学习CSS cursor 属性吧。
139 0
|
前端开发 容器
web前端学习(二十三)——CSS3定位(position)、元素裁剪(clip)及鼠标样式(cursor)属性的相关设置
web前端学习(二十三)——CSS3定位(position)、元素裁剪(clip)及鼠标样式(cursor)属性的相关设置
web前端学习(二十三)——CSS3定位(position)、元素裁剪(clip)及鼠标样式(cursor)属性的相关设置
|
前端开发
CSS cursor 属性改变鼠标的样式
可能的值 值 描述 url 需使用的自定义光标的 URL。 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。 default 默认光标(通常是一个箭头) auto 默认。
752 0
|
前端开发
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)