有时候我们需要针对文字,图片、链接等网页内容添加不同的鼠标样式,最简单的方法就是用css样式表来改变鼠标指针形状。下面是CSS样式表cursor鼠标效果的一些属性:
默认 default
文字/编辑 text
自动 auto
手形 pointer, hand(hand为IE专有)
可移动对象 move
不允许 not-allowed
无法释放 no-drop
等待/沙漏 wait
帮助 help
十字准星 crosshair
向上改变大小(North) n-resize
向下改变大小(South) s_resize 与n-resize效果相同
向左改变大小(West) w-resize
向右改变大小(East) e-resize 与w-resize效果相同
向左上改变大小(NorthWest) nw-resize
向左下改变大小(SouthWest) sw-resize
向右上改变大小(NorthEast) ne-resize 与sw-resize效果相同
向右下改变大小(SouthEast) se-resize 与nw-resize效果相同
自定义光标 url('光标地址'),鼠标文件可以使用jpg、gif、ani和cur多种文件格式。
如何应用这些改变鼠标指针形状的css样式表属性呢?实例来说明:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS cursor属性示例</title> <style type="text/css"> p { border: 1px solid #ff0000; }
p#auto { cursor: auto; } p#crosshair { cursor: crosshair; } p#default { cursor: default; } p#pointer { cursor: pointer; } p#move { cursor: move; } p#e-resize { cursor: e-resize; } p#ne-resize { cursor: ne-resize; } p#nw-resize { cursor: nw-resize; } p#n-resize { cursor: n-resize; } p#se-resize { cursor: se-resize; } p#sw-resize { cursor: sw-resize; } p#s-resize { cursor: s-resize; } p#w-resize { cursor: w-resize; } p#text { cursor: text; } p#wait { cursor: wait; } p#help { cursor: help; } p#progress { cursor: progress; }
p#urllink { cursor: url("http://www.ibloglife.com/favicon.ico"); } </style> </head> <body> <table cellspacing="0" cellpadding="0" border="1" width="600" align="center"> <tbody> <tr> <td> 默认 </td> <td> default </td> </tr> <tr> <td> 文字/编辑 </td> <td> text </td> </tr> <tr> <td> 自动 </td> <td> auto </td> </tr> <tr> <td> 手形 </td> <td> pointer, hand(hand为IE专有) </td> </tr> <tr> <td> 可移动对象 </td> <td> move </td> </tr> <tr> <td> 不允许 </td> <td> not-allowed </td> </tr> <tr> <td> 无法释放 </td> <td> no-drop </td> </tr> <tr> <td> 等待/沙漏 </td> <td> wait </td> </tr> <tr> <td> 帮助 </td> <td> help </td> </tr> <tr> <td> 十字准星 </td> <td> crosshair </td> </tr> <tr> <td> 向上改变大小(North) </td> <td> n-resize </td> </tr> <tr> <td> 向下改变大小(South) </td> <td> s_resize 与n-resize效果相同 </td> </tr> <tr> <td> 向左改变大小(West) </td> <td> w-resize </td> </tr> <tr> <td> 向右改变大小(East) </td> <td> e-resize 与w-resize效果相同 </td> </tr> <tr> <td> 向左上改变大小(NorthWest) </td> <td> nw-resize </td> </tr> <tr> <td> 向左下改变大小(SouthWest) </td> <td> sw-resize </td> </tr> <tr> <td> 向右上改变大小(NorthEast) </td> <td> ne-resize 与sw-resize效果相同 </td> </tr> <tr> <td> 向右下改变大小(SouthEast) </td> <td> se-resize 与nw-resize效果相同 </td> </tr> <tr> <td> 自定义光标 </td> <td> url('光标地址'),鼠标文件可以使用jpg、gif、ani和cur多种文件格式。 </td> </tr> </tbody> </table> <br /><br /> 把鼠标移动到每个红色方框上查看效果: <br /><br /> <p id="auto">auto正常鼠标</p> <p id="crosshair">crosshair十字鼠标</p> <p id="default">default默认鼠标</p> <p id="pointer">pointer鼠标</p> <p id="move">move移动鼠标</p> <p id="e-resize">e-resize鼠标</p> <p id="ne-resize">ne-resize鼠标</p> <p id="nw-resize">nw-resize鼠标</p> <p id="n-resize">n-resize鼠标</p> <p id="se-resize">se-resize鼠标</p> <p id="sw-resize">sw-resize鼠标</p> <p id="s-resize">s-resize鼠标</p> <p id="w-resize">w-resize鼠标</p> <p id="text">text文字鼠标</p> <p id="wait">wait等待鼠标</p> <p id="help">help求助鼠标</p> <p id="progress">progress过程鼠标</p> <p id="urllink">url("http://www.ibloglife.com/favicon.ico")鼠标</p> </body> </html>


© 活着的博客 - 李权辉的个人博客:人,终究是生活在现实之中,是为了活着而生活.