CSS自定义鼠标变小手样式

分类:知识百科 日期: 点击:0

使用方法

使用,只需要添加一行代码,即可让鼠标变成小手样式,具体的使用方法如下:


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; 西指针
标签:

版权声明

1. 本站所有素材,仅限学习交流,仅展示部分内容,如需查看完整内容,请下载原文件。
2. 会员在本站下载的所有素材,只拥有使用权,著作权归原作者所有。
3. 所有素材,未经合法授权,请勿用于商业用途,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 如果素材损害你的权益请联系客服QQ:77594475 处理。