通过CSS定义鼠标样式代码归纳

一直想写个关于CSS定义鼠标样式形状的小教程，但是一直没找到个合适的契机。昨天正好有个朋友咨询361源码“鼠标放在span元素上指针变小手怎么实现？”，这个其实很简单，也这是这个契机，让361下决心给大家写下了下面的这个小教程。

改变鼠标指针形状的方法有两种：

第一种：用的来改变鼠标指针形状。

第二种:利用第三方控件的方法。

而我自己最常用的是第一种:用css样式表来改变鼠标指针形状

我们先来看第一种：用来改变鼠标指针形状。

有些时候我们并不需要文字，图片加链接，而且还想要加链接时的鼠标样式。这就用到了我们的css样式表来鼠标指针形状了。请下面的css鼠标指针css样式表的一些属性：

默认

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('光标地址')

以上就是改变鼠标指针形状的css样式表。如何应用呢？下面我们用实例来说明一下：

<style type="text/css">.a{ cursor:hand }   /*这里边的curusor的值可以是以上表中的任何值,或是你自己定义*/</style>

<div class="a">欢迎您到361源码网</div>

也可以直接将样式表写在div标签中效果是一样的哟如:

<div style="cursor:help;">欢迎您到错新网</div>

下面还一些例子，大家看看吧：

Example：CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a><br/>  

Example：CSS鼠标手型效果 <a href="#" style="cursor:pointer">CSS鼠标手型效果</a><br/>  

注：pointer也是小手鼠标，建议大家用pointer，因为它可以兼容多种浏览器。<br/>  

Example：CSS鼠标由系统自动给出效果 <a href="#" style="cursor:auto">CSS鼠标由系统自动给出效果</a><br/>  

Example：CSS鼠标十字型 效果 <a href="#" style="cursor:crosshair">CSS鼠标十字型 效果</a><br/>  

Example：CSS鼠标I字型效果 <a href="#" style="cursor:text">CSS鼠标I字形效果</a><br/>  

Example：CSS鼠标等待效果 <a href="#" style="cursor:wait">CSS鼠标等待效果</a><br/>  

Example：CSS鼠标默认效果 <a href="#" style="cursor:default">CSS鼠标默认效果</a><br/>  

Example：CSS鼠标向右的箭头效果 <a href="#" style="cursor:e-resize">CSS鼠标向右的箭头效果</a><br/>  

Example：CSS鼠标向右上箭头效果 <a href="#" style="cursor:ne-resize">CSS鼠标向右上箭头效果</a><br/>  

Example：CSS鼠标向上箭头效果 <a href="#" style="cursor:n-resize">CSS鼠标向上箭头效果</a><br/>  

Example：CSS鼠标向左上箭头效果 <a href="#" style="cursor:nw-resize">CSS鼠标向左上箭头效果</a><br/>  

Example：CSS鼠标向左箭头效果 <a href="#" style="cursor:w-resize">CSS鼠标向左箭头效果</a><br/>  

Example：CSS鼠标向左下箭头效果 <a href="#" style="cursor:sw-resize">CSS鼠标向左下箭头效果</a><br/>  

Example：CSS鼠标向下箭头效果 <a href="#" style="cursor:s-resize">CSS鼠标向下箭头效果</a><br/>  

Example：CSS鼠标向右下箭头效果 <a href="#" style="cursor:se-resize">CSS鼠标向下箭头效果</a><br/>  

OK,就给大家罗嗦到这里，不会的联系在线客服哦。