【HTML+CSS】

【CSS控制鼠标样式cursor】

2017-05-30  本文已影响32人  魔_术师
CSS控制鼠标样式cursor

鼠标样式(cursor)

常见属性:

pointer:小手;

wait:等待;

help:帮助;

crosshair:十字准心;

move:可移动。

鼠标效果

在前端工程师进行页面开发时,会出现各种各样的效果和需求,比如在Tab切换效果当中,为了让用户知晓“标题”是可以点击的部分,会在Tab切换的标题区域针对鼠标样式进行处理(处理成小手的样子,注意,Tab切换的标题部分不是a标签)。

再如:浏览京东或者淘宝等商品时,鼠标移入到小图中时,右侧会显示出一张该图的大图,而在小图中的这个鼠标样式就会变成移动样式。

cursor所有属性

十字准心:cursor: crosshair;

手:cursor: pointer; cursor: hand; 写两个是为了照顾IE5,它只认hand。

等待/沙漏:cursor: wait;

帮助:cursor: help;

无法释放:cursor: no-drop;

文字/编辑:cursor: text;

可移动对象:cursor: move;

向上改变大小(North):cursor: n-resize;

向下改变大小(South):cursor: s-resize;

向右改变大小(East):cursor: e-resize;

向左改变大小(West):cursor: w-resize;

向上右改变大小(North East):cursor: ne-resize;

向上左改变大小(North West):cursor: nw-resize;

向下右改变大小(South East):cursor: se-resize;

向下左改变大小(South West):cursor: sw-resize;

自动:cursor: auto;

禁止:cursor:not-allowed;

处理中:cursor: progress;

系统默认:cursor: default。

上一篇下一篇

猜你喜欢

热点阅读