【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。