首页 > 其他分享 >【CSS: cursor】鼠标光标指针样式大全

【CSS: cursor】鼠标光标指针样式大全

时间:2024-07-04 12:19:41浏览次数:22  
标签:鼠标 url 指示 cursor 样式 CSS 光标 指针

浏览器内置指针样式:

标了红色 * 号的为我认为的常用指针样式。

cursor: auto; (默认值)

浏览器根据当前内容自动决定指针样式;
例如当内容是文字时使用 text 样式
cursor: default;默认指针,通常是箭头。
cursor: none;不渲染指针!
cursor: context-menu;

(该指针经测试没效果?)指针下有可用内容目录。配套使用案例如下:

【html+js+css】前端浏览器自定义 右键菜单显示_oumae-kumiko的博客-CSDN博客

cursor: help;* 指示帮助。
cursor: pointer;* 悬浮于该元素上时,通常为手。
cursor: progress;程序后台繁忙,用户仍可交互 (与wait 相反).
cursor: wait;* 程序繁忙,用户不可交互 (与progress 相反).图标一般为沙漏或者表。
cursor: cell;指示单元格可被选中
cursor: crosshair;* 交叉指针,通常指示位图中的框选
cursor: text;指示文字可被选中
cursor: vertical-text;指示垂直文字可被选中
cursor: alias;复制或快捷方式将要被创建
cursor: copy;指示可复制
cursor: move;

* 被悬浮的物体可被移动

cursor: no-drop;

* 当前位置不能扔下

cursor: not-allowed;* 不能执行
cursor: grab;

可抓取

cursor: grabbing;

抓取中

cursor: all-scroll;

元素可任意方向滚动(平移)

cursor: col-resize;

* 元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头

cursor: row-resize;

* 元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头

cursor: zoom-in;

* 指示可被放大或缩小

cursor: zoom-out;

* 指示可被放大或缩小

cursor: ns-resize;

* 指示高双向重新设置大小

cursor: ew-resize;

* 指示宽双向重新设置大小

cursor: nwse-resize;

* 指示宽、高双向重新设置大小(左上、右下)

cursor: nesw-resize;

* 指示宽、高双向重新设置大小(右上、左下)


其他属性:

/* 全局属性 */cursor: inherit;cursor: initial;cursor: unset;

url() : 自定义鼠标指针!

除了浏览器提供的鼠标样式,我们还可以借助 cursor: url() 的特性,即可实现定制自己的鼠标样式!

/* 使用 URL,并提供一个关键字值作为备用 */cursor: url(hand.cur), pointer; /* URL 和 xy 的坐标偏移值,最后提供一个关键字值作为备用 */cursor:  url(cursor1.png) 4 12, auto;cursor:  url(cursor2.png) 2 2, pointer;

cursor 属性为零个或多个值,多个url()的时候它们之间用逗号分隔,最后必填一个cursor的关键字值。每个指向一个图像文件。浏览器将尝试加载指定的第一个图像,如果无法加载则继续加载下一个图像,如果都无法加载图像或未指定图像,则使用关键字值代表的指针类型。

每个后面都可选跟一对空格分隔的数字表示偏移。它们用来设置指针的热点 (即自定义图标的实际点击位置),位置相对于图标的左上角。

多 `url()` 例子:

cursor: url(one.svg), url(two.svg) 5 5, progress;

<url>
url(…)或者逗号分隔的url(…), url(…), …,指向图片文件。用大于一个值提供后备,以防某些指针图片类型不被支持。最后必须提供一个非 URL 后备值。

<x> <y> 
可选 x,y 坐标。两个小于 32 的无单位非负数。

自定义、定制鼠标指针例子:

【css】自定义鼠标光标指针样式-前端_oumae-kumiko的博客-CSDN博客

本文转自 https://blog.csdn.net/lijiahui_/article/details/130946684,如有侵权,请联系删除。

标签:鼠标,url,指示,cursor,样式,CSS,光标,指针
From: https://www.cnblogs.com/shuiche/p/18283463

相关文章

  • 前端面试题(CSS篇一)
    一、介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?相关知识点:(1)有两种盒模型:IE盒模型(border-box)、W3C标准盒模型(content-box)(2)盒模型:分为内容(content)、填充(padding)、边界(margin)、边框(border)四个部分IE盒模型和W3C标准盒模型的区别:(1)W3C标准盒模型......
  • 编译elementUI主题scss
    elementVue2工程1. 安装包"gulp":"^4.0.2","gulp-autoprefixer":"^8.0.0","gulp-minify-css":"^1.2.4","gulp-sass":"^4.0.2","gulp-uglify":"^3.0.2",2.......
  • html+JavaScript+css 24点计算器
    源代码    采用穷举计算方法讲人话:根据四个数随机列算式,算出来是24就显示在列表里。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">&l......
  • 不实用iframe,CSS媒体查询依旧生效
    这段SCSS代码定义了用于处理响应式设计和媒体查询的功能和混合器。以下是对这段代码的逐行解释:```scss$mediaMinWidth:1024px;```定义了一个变量`$mediaMinWidth`,其值为1024像素。```scss@functiontranslate-media-condition($c){$condMap:("screen":"......
  • css3 列表按先后顺序移动过来显示
    要实现列表按先后顺序平移过来,可以使用CSS动画结合:nth-child()选择器。以下是一个简单的示例:HTML:<ulclass="list"><li>Item1</li><li>Item2</li><li>Item3</li><li>Item4</li></ul>CSS:.listli{opacity:......
  • CSS 选择器
    WebUI自动化中,定位方式的优先级:优先级最高:id优先级其次:name优先级再次:CSSselector优先级再次:Xpath 针对cssselector和xpath的优先级:在项目中我们用的最多的是css或xpath,优先选择css原因:(1)css是配合html来工作,它的实现原理是匹配对象的原......
  • CSS-文本样式,列表样式,其他样式
    color为字体指定颜⾊font-style⽤于打开和关闭斜体⽂本font-weight为字体设置粗细程度font-size为⽂字指定⼤⼩font-family为⽂字指定特殊的字体,浏览器只会使⽤浏览器可以访问到的字体webFont⽹络字体text-decoration设置或者取消⽂本修饰text-align⽂字排列⽅......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript运动网站(田径)
    HTML+CSS+JS【运动网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript购物商城(Oppo)
    HTML+CSS+JS【购物商城】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......
  • 打包警告:chunk common [mini-css-extract-plugin]Conflicting order between:
    1.问题webpage5打包告警:chunkcommon[mini-css-extract-plugin]Conflictingorderbetween:2.解决方案:-vue.config.js配置//vue.config.jsmodule.exports={//...,css:{extract:{ignoreOrder:true},}};或者:调整组件引入的顺序3.......