2005-11-5 14:49
Sai
CSS光标属性一览表
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="TextLeft">
<tbody>
<tr>
<th colspan="2">光标类型
</td>
<th>CSS
</td>
</tr>
<tr>
<td colspan="2">把你的光标放到相应文字上查看效果</td>
<td>要注意光标的实际效果依赖于用户的系统设置,与你在这里看到的效果并不一定一致。</td>
</tr>
<tr class="odd">
<td bgcolor="#FFFFFF"><img alt="十字准心" src="http://www.sharkui.com/articles/examples/19/crosshair.gif" /> </td>
<td width="40%"><span style="cursor: crosshair;">十字准心</span></td>
<td><code>cursor: crosshair;</code></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><img alt="手" src="http://www.sharkui.com/articles/examples/19/hand.gif" /> </td>
<td><span style="cursor:hand;cursor:pointer;">手</span></td>
<td><code>cursor: pointer; <br />
cursor: hand;</code><br />
写两个是为了照顾IE5,它只认hand。</td>
</tr>
<tr class="odd">
<td bgcolor="#FFFFFF"><img height="29" alt="等待/沙漏" src="http://www.sharkui.com/articles/examples/19/wait.gif" width="25" /> </td>
<td><span style="cursor: wait;">等待/沙漏</span></td>
<td><code>cursor: wait;</code></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><img height="29" alt="帮助" src="http://www.sharkui.com/articles/examples/19/help.gif" width="30" /></td>
<td><span style="cursor: help;">帮助</span></td>
<td><code>cursor: help;</code></td>
</tr>
<tr class="odd">
<td bgcolor="#FFFFFF"><img height="40" alt="无法释放" src="http://www.sharkui.com/articles/examples/19/no-drop.gif" width="40" /></td>
<td><span style="cursor: no-drop;">无法释放</span></td>
<td><code>cursor: no-drop;</code></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><img height="24" alt="文字/编辑" src="http://www.sharkui.com/articles/examples/19/text.gif" width="17" /></td>
<td><span style="cursor: text;">文字/编辑</span></td>
<td><code>cursor: text;</code></td>
</tr>
<tr class="odd">
<td bgcolor="#FFFFFF"><img height="28" alt="可移动对象" src="http://www.sharkui.com/articles/examples/19/move.gif" width="24" /></td>
<td><span style="cursor: move;">可移动对象</span></td>
<td><code>cursor: move;</code></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><img height="24" alt="向上改变大小" src="http://www.sharkui.com/articles/examples/19/nresize.gif" width="17" /></td>
<td><span style="cursor: n-resize;">向上改变大小(North) </span></td>
<td><code>cursor: n-resize;</code></td>
</tr>
<tr class="odd">
<td bgcolor="#FFFFFF"><img height="24" alt="向下改变大小" src="http://www.sharkui.com/articles/examples/19/sresize.gif" width="17" /></td>
<td><span style="cursor: s-resize;">向下改变大小(South) </span></td>
<td><code>cursor: s-resize;</code></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><img height="19" alt="向右改变大小" src="http://www.sharkui.com/articles/examples/19/eresize.gif" width="26" /></td>
<td><span style="cursor: e-resize;">向右改变大小(East) </span></td>
<td><code>cursor: e-resize;</code></td>
</tr>
<tr class="odd">
<td bgcolor="#FFFFFF"><img height="19" alt="向左改变大小" src="http://www.sharkui.com/articles/examples/19/wresize.gif" width="26" /></td>
<td><span style="cursor: w-resize;">向左改变大小(West) </span></td>
<td><code>cursor: w-resize;</code></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><img height="28" alt="向上右改变大小" src="http://www.sharkui.com/articles/examples/19/neresize.gif" width="23" /></td>
<td><span style="cursor: ne-resize;">向上右改变大小(North East) </span></td>
<td><code>cursor: ne-resize;</code></td>
</tr>
<tr class="odd">
<td bgcolor="#FFFFFF"><img height="24" alt="向上左改变大小" src="http://www.sharkui.com/articles/examples/19/nwresize.gif" width="26" /></td>
<td><span style="cursor: nw-resize;">向上左改变大小(North West) </span></td>
<td><code>cursor: nw-resize;</code></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><img height="24" alt="向下右改变大小" src="http://www.sharkui.com/articles/examples/19/seresize.gif" width="26" /></td>
<td><span style="cursor: se-resize;">向下右改变大小(South East) </span></td>
<td><code>cursor: se-resize;</code></td>
</tr>
<tr class="odd">
<td bgcolor="#FFFFFF"><img height="28" alt="向下左改变大小" src="http://www.sharkui.com/articles/examples/19/swresize.gif" width="23" /></td>
<td><span style="cursor: sw-resize;">向下左改变大小(South West) </span></td>
<td><code>cursor: sw-resize;</code></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><img height="24" alt="自动" src="http://www.sharkui.com/articles/examples/19/auto.gif" width="17" /></td>
<td><span style="cursor: auto;">自动</span></td>
<td><code>cursor: auto;</code></td>
</tr>
<tr class="odd">
<td bgcolor="#FFFFFF"><img height="24" alt="禁止" src="http://www.sharkui.com/articles/examples/19/not-allowed.gif"
width="24" /></td>
<td><span style="cursor: not-allowed;">禁止</span></td>
<td><code>cursor:not-allowed;</code></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><img height="28" alt="处理中" src="http://www.sharkui.com/articles/examples/19/progress.gif" width="31" /></td>
<td><span style="cursor: progress;">处理中</span></td>
<td><code>cursor: progress;</code></td>
</tr>
<tr class="odd">
<td bgcolor="#FFFFFF"><img height="29" alt="系统默认" src="http://www.sharkui.com/articles/examples/19/default.gif" width="25" /></td>
<td><span style="cursor: default">系统默认</span></td>
<td><code>cursor: default;</code></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" style="cursor: url('http://www.sharkui.com/articles/examples/19/cursor2.ani');"><img height="32" alt="用户自定义" src="http://www.sharkui.com/articles/examples/19/cursor2.gif" width="32" /></td>
<td><span style="cursor: url('http://www.sharkui.com/articles/examples/19/cursor2.ani')">用户自定义(可用动画)</span></td>
<td><code>cursor: url(' # ');</code><br />
# = 光标文件地址 (注意文件格式必须为:.cur 或 .ani)。</td>
</tr>
</tbody>
</table>