盘点,这些年你知道的鼠标移入显示小手图标的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("小图片地址") /* 设置鼠标指针默认为一个小图片 */
}

在这里插入图片描述

posted @ 2022-06-21 08:44  水香木鱼  阅读(212)  评论(0编辑  收藏  举报