把你的光标放到相应文字上鼠标显示效果

cursor:auto;

自动

cursor:zoom-in;

放大镜

cursor:zoom-out;

缩小镜

cursor:all-scroll;

上下左右任何方向滚动

cursor:crosshair;

十字准心

cursor:pointer;

cursor:wait;

等待

cursor:help;

帮助

cursor:no-drop;

无法释放

cursor:text;

文字/编辑

cursor:move;

可移动对象

cursor:vertical-text;

可编辑的垂直文本的光标

cursor:n-resize;

向上改变大小(North)

cursor:s-resize;

向下改变大小(South)

cursor:e-resize;

向右改变大小(East)

cursor:w-resize;

向左改变大小(West)

cursor:ne-resize;

向上右改变大小(North East)

cursor:nw-resize;

向上左改变大小(North West)

cursor:se-resize;

向下右改变大小(South East)

cursor:sw-resize;

向下左改变大小(South West)

cursor:col-resize;

可被水平改变尺寸

cursor:row-resize;

可被垂直改变尺寸

cursor:not-allowed;

禁止

cursor:progress;

处理中

cursor:default;

系统默认

cursor:url('#');#为光标文件地址

(注意文件格式必须为:.cur或.ani)

用户自定义(可用动画)

注意:在定义完自定义的游标之后在末尾加上一般性的游标,

以防那些url所定义的游标不能使用

说明:

cursor 属性:设置显示的光标的类型(形状)。

此属性的值可以是多个,其间要用逗号分隔;

假如第一个值无法找到而不能被显示,则第二个值将被尝试使用,依此类推;

假如全部值都不可用的话,则此属性不会发生作用,光标也不会被改变。

比如:{cursor:pointer,wait,help;},从pointer到wait,再到help,如果都没被应用,则cursor属性不起任何作用。

现在举一个“手”光标的例子,写法有两种:

效果图:

cursor:pointer;

第一种是行内样式:(行内样式:将CSS样式编写在标签之中)

cursor:pointer;

第二种是内部样式:(内部样式:由

291424a66d649817bc8db3278a3a9c8ab64.gif

.pointer:hover{

cursor:pointer;

}

cursor:pointer;

e7d647ba60defa112160483abf8ce13b.gif

Logo

汇聚全球AI编程工具,助力开发者即刻编程。

更多推荐