在css中,可以使用cursor属性来改变鼠标的样式,该属性可以指定鼠标指针放在一个元素边界范围内时所用的光标形状;例如当属性值为“url(..)”可自定义鼠标样式,“crosshair”设置十字线样式,“pointer”设置小手样式。
一个或多个逗号分隔的url()用来指向要用作光标的图像。用户代理从第一个中检索游标url()。如果用户代理无法处理游标列表的第一个游标,则必须尝试处理游标列表等。如果用户代理无法处理任何提供的图像(请参阅浏览器支持),则必须使用游标关键字。列表的末尾。可选的和坐标标识图像中指针位置(即热点)的确切位置。
.custom { cursor: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/cursor/clock-cursor.png), url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/cursor/clock-cursor.cur), pointer; }
此光标通常呈现为向上,向下,向左和向右的箭头,中间有一个点。它表示可以向任何方向滚动某些内容。
.n-resize { cursor: n-resize; } .ne-resize { cursor: ne-resize; } .e-resize { cursor: e-resize; } .se-resize { cursor: se-resize; } .s-resize { cursor: s-resize; } .sw-resize { cursor: sw-resize; } .w-resize { cursor: w-resize; } .nw-resize { cursor: nw-resize; } .se-resize { cursor: se-resize; } .ew-resize { cursor: ew-resize; } .ns-resize { cursor: ns-resize; } .nesw-resize { cursor: nesw-resize; } .nwse-resize { cursor: nwse-resize; } .col-resize { cursor: col-resize; } .row-resize { cursor: row-resize; } .all-scroll { cursor: all-scroll; }
(学习视频分享:css视频教程)
以上就是css如何改变鼠标样式的详细内容,更多请关注其它相关文章!