一直想寫個關于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,就給大家羅嗦到這里，不會的聯系在線客服哦。