怎么在css中改变光标样式

怎么在css中改变光标样式

在css中cursor属性是用来定义了鼠标指针放在一个元素边界范围内时所用的光标形状;我们可以通cursor属性来设置鼠标光标(指针)样式。

cursor属性的语法:

cursor: auto|crosshair|default|hand|move|help|wait|text|w-resize|s-resize|n-resize|e-resize|ne-resize|sw-resize|se-resize|nw-resize|pointer|url(url)

登录后复制

可能的属性值:

● url:需使用的自定义光标的 URL。注:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。

立即学习“前端免费学习笔记(深入)”;

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

● auto:默认。浏览器设置的光标。

● crosshair:光标呈现为十字线。

● pointer:光标呈现为指示链接的指针(一只手)

● move:此光标指示某对象可被移动。

● e-resize:此光标指示矩形框的边缘可被向右(东)移动。

● ne-resize:此光标指示矩形框的边缘可被向上及向右移动(北/东)。

● nw-resize:此光标指示矩形框的边缘可被向上及向左移动(北/西)。

● n-resize:此光标指示矩形框的边缘可被向上(北)移动。

● se-resize:此光标指示矩形框的边缘可被向下及向右移动(南/东)。

● sw-resize:此光标指示矩形框的边缘可被向下及向左移动(南/西)。

● s-resize:此光标指示矩形框的边缘可被向下移动(北/西)。

● w-resize:此光标指示矩形框的边缘可被向左移动(西)。

● text:此光标指示文本。

● wait:此光标指示程序正忙(通常是一只表或沙漏)。

● help:此光标指示可用的帮助(通常是一个问号或一个气球)。

常用cursor光标说明

1、div{ cursor:default }默认正常鼠标指针

2、div{ cursor:hand }和div{ cursor:text } 文本选择效果

3、div{ cursor:move } 移动选择效果

4、div{ cursor:pointer } 手指形状 链接选择效果

5、div{ cursor:url(url图片地址) }设置对象为图片

cursor样式效果图

https://cdn.chuangxiangniao.com/2025/03/20250313100902640.jpg

鼠标指针说明

cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

控制设置鼠标指针样式是比较常用的,但光标切记勿滥用,也不要轻易设置自定义图片为鼠标样式这样会将网页造成复杂与不符合用户体验感觉,切记光标慎用。

以上就是怎么在css中改变光标样式的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2886950.html

(0)
上一篇 2025年3月10日 20:57:26
下一篇 2025年2月23日 20:25:17

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • hbuilder怎么引用css

    hbuilder是dcloud(数字天堂)推出的一款支持html5的web开发ide。hbuilder的编写用到了java、c、web和ruby。hbuilder本身主体是由java编写,它基于eclipse,所以顺其自然地兼容了eclip…

    2025年3月10日
    200
  • 《CSS权威指南》怎么样

    《css权威指南》是2007年10月由中国电力出版社出版的图书,作者是eric a.meyer。 本书通过诸多示例,详细讲解了如何做到仅在一处建立样式表就能创建或修改整个网站的外观,以及如何得到html力不能及的更丰富的表现效果。同时展示了…

    2025年3月10日
    200
  • 清除浮动的css写法有哪些

    本文通过图文并茂的形式给大家介绍了CSS浮动与清除浮动的实例代码,非常不错,具有一定的参考借鉴价值,,需要的朋友可以参考下  一、float(浮动)是什么 float 属性定义元素在哪个方向浮动。 float:left 元素向左浮动。 fl…

    2025年3月10日 编程技术
    200
  • sass系统是什么

    sass2007年诞生,最早也是最成熟的css预处理器,拥有ruby社区的支持和compass这一最强大的css框架,目前受less影响,已经进化到了全面兼容css的scss。 Sass(英文全称:Syntactically Awesome…

    2025年3月10日
    200
  • css全称

    css层叠样式表(英文全称:cascading style sheets)是一种用来表现html(标准通用标记语言的一个应用)或xml(标准通用标记语言的一个子集)等文件样式的计算机语言。 CSS不仅可以静态地修饰网页,还可以配合各种脚本语…

    2025年3月10日
    200
  • css如何实现表格实线

    利用在css设置表格实线: 代码如下: table{border-collapse:collapse;   /*表示将单元格中各小格之间的空隙进行合并*/border:1px #00F solid;      /*定义边框样式*/} 登录后…

    2025年3月10日
    200
  • css样式属性是什么

    推荐教程:CSS教程 简介   层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网…

    2025年3月10日
    200
  • CSS滤镜和混合模式处理的图片如何上传下载?

    一、使用CSS滤镜和混合模式在线PS(推荐学习:CSS视频教程) 使用CSS滤镜和混合模式可以实现各种各样的图像处理效果,例如CSSgram项目,内置众多图像处理效果,部分效果示意如下缩略图: 进入demo页面你也可以点击这里的按钮,更换你…

    2025年3月10日 编程技术
    200
  • css隐藏元素的几种方法中可以触发点击事件的是?

    css隐藏元素的几种方法中可以触发点击事件的是 是opacity设置为0的方法。 css隐藏元素的方式: 1、display:none; .box{    display: none;} 登录后复制 最简单也最粗暴的方法就是设置元素的dis…

    2025年3月10日
    200
  • 为什么把css放到顶部

    原因: CSS文件放在顶部一方面是因为放置顺序决定了下载的优先级,更关键的是浏览器的渲染机制。 最理想的情况,我们希望浏览器逐渐的渲染下载好的CSS,将页面逐渐的展现给用户。但是浏览器为了避免样式变化时重新渲染绘制页面元素,会阻塞内容逐步呈…

    2025年3月10日
    200

发表回复

登录后才能评论