使用CSS为内容设定特定的鼠标样式(cursor)介绍
相信大家都知道我们的鼠标在网页中不同的元素中有不同的显示(例如 a 元素就显示为“箭头指针”),但是其实我们还可以自定义这些有趣的东西哦!今天“畅想资源”就来教大家如何使用CSS为内容设定特定的鼠标样式(cursor),让你的网页更加的生动、活泼!
教学
以下的表格显示了每一种样式相应的CSS代码,而只需将鼠标移动到对应的框格内就可以预览效果啦!(各种系统、浏览器下的效果可能有所区别!)
效果示例
| cursor: alias; |
| cursor: all-scroll; |
| cursor: auto; |
| cursor: cell; |
| cursor: context-menu; |
| cursor: col-resize; |
| cursor: copy; |
| cursor: crosshair; |
| cursor: default; |
| cursor: e-resize; |
| cursor: ew-resize; |
| cursor: grab; |
| cursor: grabbing; |
| cursor: help; |
| cursor: move; |
| cursor: n-resize; |
| cursor: ne-resize; |
| cursor: nesw-resize; |
| cursor: ns-resize; |
| cursor: nw-resize; |
| cursor: nwse-resize; |
| cursor: no-drop; |
| cursor: none; |
| cursor: not-allowed; |
| cursor: pointer; |
| cursor: progress; |
| cursor: row-resize; |
| cursor: s-resize; |
| cursor: se-resize; |
| cursor: sw-resize; |
| cursor: text; |
| cursor: url(http://codeo.cn/favicon.ico), url(myBall.cur), auto; |
| cursor: vertical-text; |
| cursor: w-resize; |
| cursor: wait; |
| cursor: zoom-in; |
| cursor: zoom-out; |
| cursor: initial; |

浙公网安备 33010602011771号