CSS中的cursor 属性可以可以使鼠标移动到行上时有点击图标,将cursor的值设置为pointer 光标呈现为指示链接的指针(一只手)。例如:<a style="cursor:pointer">点击图标</a> ,效果如下图所示:
1、cursor定义和用法:
cursor 属性规定要显示的光标的类型(形状)。
该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围)。
默认值:auto
继承性:yes
版本:CSS2
JavaScript 语法:object.style.cursor="crosshair"
2、cursor可能的值
默认箭头样式cursor:default系统默认 箭头样式手型cursor: pointer系统自带 手型
手型cursor:hand系统自带 手型提示 只有ie5支持这种手型也只支持这种
移动十字箭头cursor: move系统自带 移动十字箭头
帮助问号cursor: help系统自带 帮助问号
十字准心 cursor:crosshair 系统自带 十字准心
文字/编辑cursor: text系统自带 编辑或者框选文字时 竖线型
无法释放(禁用)cursor:no-drop系统自带 当不可编辑时禁用型
禁用cursor:not-allowed系统自带 当不可编辑时禁用型
自动cursor:auto就是由系统根据当前元素自动设置
处理中cursor: progresswin7为一个圆环,xp为一个沙漏,等待处理中样式
向上改变大小cursor: n-resize系统自带
向下改变大小cursor: s-resize系统自带
向左改变大小cursor: w-resize系统自带
向右改变大小cursor: e-resize系统自带
向上左改变大小cursor: nw-resize系统自带
向下左改变大小cursor: sw-resize系统自带
向上右改变大小cursor: ne-resize系统自带
向下右改变大小cursor: se-resize系统自带
在除了IE6的情况下,可以通过CSS的:hover伪类来实现:假如你想设定的固定区域为:<div id="test"></div>,那么只需要在CSS样式表里定义:#test:hover{cursor:pointer/*这里必须设为pointer才会对所有浏览器有效,hander只针对IE有效*/},
如果要在IE6下实现这个效果,除非你固定的区域是个块状的<a>标签区域,否则就要借助JS来实现了(引入一个HTC文件可以解决)。
【另外有一种更简便的方法】:就是将这个元素用<a>包围起来,如:
<a href="#" style="text-decoration:none"><div id="test" style="height:50pxwidth:50px"><!--这个区域的鼠标是手形!--></div></a>,这个方法IE6也同样可以有效。