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

Posted 水香木鱼ゆ

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了盘点,这些年你知道的鼠标移入显示小手图标的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("小图片地址") /* 设置鼠标指针默认为一个小图片 */


以上是关于盘点,这些年你知道的鼠标移入显示小手图标的css的cursor 属性,你还记得吗?的主要内容,如果未能解决你的问题,请参考以下文章

css中鼠标没有移上去图片是黑色

css 如何改变鼠标图标

网页中如何让鼠标指针变成小手状

el-tree 实现鼠标移入节点,显示功能按钮(船新版本)

比如一个div元素,当鼠标mouseover事件触发时,我想知道从上左下右哪个方向移入进去的.

#yyds干货盘点#用css做事件监听