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