使用方法
使用,只需要添加一行代码,即可让鼠标变成小手样式,具体的使用方法如下:
element {
cursor: pointer;
}
上面的代码中,element代表需要改变鼠标样式的元素,比如改变页面中所有按钮的鼠标样式,可以这样写:
button {
cursor: pointer;
}
如果只想改变某个按钮的鼠标样式,可以这样写:
#button1 {
cursor: pointer;
}
其他鼠标样式
除了小手样式,CSS还可以自定义其他鼠标样式,比如改变鼠标样式为箭头,可以这样写:
element {
cursor: default;
}
如果想改变鼠标样式为抓手,可以这样写:
element {
cursor: grab;
}
如果想改变鼠标样式为拖拽,可以这样写:
element {
cursor: move;
}
鼠标样式列表
下面是常用的鼠标样式列表,可以根据需要自定义鼠标样式:
样式 | 代码 |
---|---|
小手 | cursor: pointer; |
箭头 | cursor: default; |
抓手 | cursor: grab; |
拖拽 | cursor: move; |
其他鼠标样式
除了上面提到的几种常用的鼠标样式,CSS还支持其他更多鼠标样式,例如:
- cursor: help; 帮助指针
- cursor: not-allowed; 禁止指针
- cursor: progress; 进度指针
- cursor: text; 文本指针
- cursor: wait; 等待指针
- cursor: wait; 等待指针
- cursor: crosshair; 十字线指针
- cursor: n-resize; 北指针
- cursor: e-resize; 东指针
- cursor: s-resize; 南指针
- cursor: w-resize; 西指针