css的 cursor 属性

Posted 2023-04-15

参考技术A 1.Auto 鼠标指针会显示默认的样式

2.Crosshair 鼠标指针会显示"+"\

3.Point 鼠标指针会显示"手"形图标

4.Wait 鼠标指针会显示"圆形的" 旋转图标

5.其余的属性不是很常用

6.cursor的javascript 语法

盘点，这些年你知道的鼠标移入显示小手图标的css的cursor 属性，你还记得吗？

在 style中使用：一🛩⛵cursor语法

鼠标状态效果：

---

一🐱‍🏍1、正常状态

.shapeDefault
  cursor: default;

一🐱‍💻2、小手状态

.shapeHand
  cursor: pointer;

一🐱‍🐉3、移动状态

.shapeMove
  cursor: move;

一🐱‍👓4、对角线状态【左下、右上】

.shapeNe-resize 
  cursor: ne-resize ;

一🐱‍🚀5、对角线状态【左上、右下】

.shapeSe-resize 
  cursor: se-resize ;

一🙈6、水平状态

.shapeW-resize 
  cursor: w-resize ;

一🙉7、垂直状态

.shapeS-resize 
  cursor: s-resize ;

一🙊8、帮助状态

.shapeHelp 
  cursor: help ;

一🐵9、十字状态

.shapeCrosshair  
  cursor: crosshair ;

一🐶10、文本输入状态

.shapeText  
  cursor: text ;

一🐯11、刷新状态

.shapeWait  
  cursor: wait;

一🐱12、进度状态

.shapeProgress 
  cursor: progress;

一🦁13、禁用状态

.shapeNo-drop 
  cursor: no-drop;

一🦊14、左右箭头

.shapeCol-resize 
  cursor: col-resize;

一🐸15、上下箭头

.shapeRow-resize 
  cursor: row-resize;

一🐠16、自定义 显示图标

目前测试 显示不出来,待后续 会补充到 评论当中。

.shapeCustom  
cursor: url("小图片地址") /* 设置鼠标指针默认为一个小图片 */

---