HTML行中的什么属性可以使鼠标移动到行上时有点击图标,就是有小手显示

html-css016

HTML行中的什么属性可以使鼠标移动到行上时有点击图标,就是有小手显示,第1张

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也同样可以有效。