是否曾經(jīng)有過這樣的經(jīng)歷：把一個(gè)元素置于另一個(gè)元素之上，而希望下面的那個(gè)元素成為可點(diǎn)擊的？現(xiàn)在，利用css的pointer-events屬性即可做到。

CSS pointer-events

Pointer-events原本來源于SVG，目前在很多瀏覽器中已經(jīng)得到體現(xiàn)。不過，要讓任何HTML元素生效還得借助于一點(diǎn)點(diǎn)css。該屬性稱之為pointer-events，基本上可以將它設(shè)置為auto，這是正常的行為，而“none”是一個(gè)有趣的屬性。

將它應(yīng)用到一個(gè)元素

如果你已經(jīng)設(shè)置一個(gè)元素的css屬性為pointer-events: none。它將不會(huì)捕獲任何click事件，而是讓事件穿過該元素到達(dá)下面的元素，就像這樣：

瀏覽器支持

到目前為止，F(xiàn)irefox 3.6+、Safari 4 和Google Chrome支持Pointer-events。我覺得Opera和IE肯定會(huì)盡快趕上，我不知道它們的計(jì)劃中是否支持它。

小演示

我將Pointer-events行為的演示放在一起，在那里你可以自己測(cè)試它。正如你看到的那樣，右邊灰色的盒子阻止單擊下面的鏈接。但是，如果你單擊checkbox對(duì)其禁用Pointer-events。下面鏈接的click事件將被觸發(fā)。

演示頁完整的代碼如下所示：

實(shí)際的例子

如果你進(jìn)入Twitter（國內(nèi)好像不能登錄到該網(wǎng)站，如下圖所示）的開始頁，而且沒有登錄。在底部你將看到很多列出的標(biāo)簽。在右邊的一個(gè)元素，有一張褪色的圖片覆蓋其上產(chǎn)生這樣的效果。不幸的是下面的鏈接無法點(diǎn)擊。如果你在css中添加一行代碼，就可以了。

現(xiàn)在，如果你需要這種效果，你有了一個(gè)非常簡單的方法。

下面來具體的介紹下：

系統(tǒng)默認(rèn)鼠標(biāo)指針樣式外，可以通過CSS設(shè)置圖片為鼠標(biāo)指針，常見有些網(wǎng)站鼠標(biāo)指針是各種各樣小圖片樣式，當(dāng)然這個(gè)是通過css cursor設(shè)置鼠標(biāo)樣式。

一、cursor語法與結(jié)構(gòu)   -   TOP1、cursor語法：
cursor : auto | crosshair | default | hand | move | help | wait | text | w-resize |s-resize | n-resize |e-resize | ne-resize |sw-resize | se-resize | nw-resize |pointer | url (url)

常用cursor光標(biāo)說明

1）、div{ cursor:default }默認(rèn)正常鼠標(biāo)指針
2）、div{ cursor:hand }和div{ cursor:text } 文本選擇效果
3）、div{ cursor:move } 移動(dòng)選擇效果
4）、div{ cursor:pointer } 手指形狀 鏈接選擇效果
5）、div{ cursor:url(url圖片地址) }設(shè)置對(duì)象為圖片

2、cursor樣式效果圖



3、鼠標(biāo)指針說明

cursor設(shè)置或檢索在對(duì)象上移動(dòng)的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀。

4、布局結(jié)構(gòu)
p { cursor: text; } /* css注釋： 設(shè)置鼠標(biāo)移動(dòng)到html p對(duì)象時(shí)鼠標(biāo)變?yōu)槲谋具x擇樣式 */
a { cursor: pointer; } /* css注釋： 設(shè)置鼠標(biāo)移動(dòng)到a超鏈接對(duì)象時(shí)鼠標(biāo)變?yōu)槭种感螤睿ㄦ溄舆x擇） */
body { cursor: url("小圖片地址")} /* 設(shè)置鼠標(biāo)指針默認(rèn)為一個(gè)小圖片 */

擴(kuò)展閱讀：css a、css a link、a hover、css超鏈接樣式

二、鼠標(biāo)指針樣式總結(jié)  

TOP鼠標(biāo)指針樣式控制設(shè)置是比較常用的，比如日常我們?cè)贒IV+CSS布局時(shí)候，我們希望鼠標(biāo)指向某個(gè)局部span標(biāo)簽對(duì)象時(shí)候，鼠標(biāo)指針光標(biāo)就變?yōu)槭种笭顟B(tài)，這個(gè)時(shí)候我們就對(duì)對(duì)象span設(shè)置cursor: pointer即可。以上我們圖例展示常用的鼠標(biāo)光標(biāo)形狀與css單詞，希望布局時(shí)候更加自身需要選擇設(shè)置鼠標(biāo)指針樣式。需要注意是，光標(biāo)切記勿濫用，也不要輕易設(shè)置自定義圖片為鼠標(biāo)樣式這樣會(huì)將網(wǎng)頁造成復(fù)雜與不符合用戶體驗(yàn)感覺，切記光標(biāo)慎用。

Example：CSS鼠標(biāo)手型效果 <a href="#" style="cursor:hand">CSS鼠標(biāo)手型效果</a>
Example：CSS鼠標(biāo)手型效果 <a href="#" style="cursor:pointer">CSS鼠標(biāo)手型效果</a>
注：pointer也是小手鼠標(biāo)，建議大家用pointer，因?yàn)樗梢约嫒荻喾N瀏覽器。

具體的用法可以參考下面的方法：

Example：CSS鼠標(biāo)由系統(tǒng)自動(dòng)給出效果 <a href="#" style="cursor:auto">CSS鼠標(biāo)由系統(tǒng)自動(dòng)給出效果</a>
Example：CSS鼠標(biāo)十字型 效果 <a href="#" style="cursor:crosshair">CSS鼠標(biāo)十字型 效果</a>
Example：CSS鼠標(biāo)I字型效果 <a href="#" style="cursor:text">CSS鼠標(biāo)I字形效果</a>
Example：CSS鼠標(biāo)等待效果 <a href="#" style="cursor:wait">CSS鼠標(biāo)等待效果</a>
Example：CSS鼠標(biāo)默認(rèn)效果 <a href="#" style="cursor:default">CSS鼠標(biāo)默認(rèn)效果</a>
Example：CSS鼠標(biāo)向右的箭頭效果 <a href="#" style="cursor:e-resize">CSS鼠標(biāo)向右的箭頭效果</a>
Example：CSS鼠標(biāo)向右上箭頭效果 <a href="#" style="cursor:ne-resize">CSS鼠標(biāo)向右上箭頭效果</a>
Example：CSS鼠標(biāo)向上箭頭效果 <a href="#" style="cursor:n-resize">CSS鼠標(biāo)向上箭頭效果</a>
Example：CSS鼠標(biāo)向左上箭頭效果 <a href="#" style="cursor:nw-resize">CSS鼠標(biāo)向左上箭頭效果</a>
Example：CSS鼠標(biāo)向左箭頭效果 <a href="#" style="cursor:w-resize">CSS鼠標(biāo)向左箭頭效果</a>
Example：CSS鼠標(biāo)向坐下箭頭效果 <a href="#" style="cursor:sw-resize">CSS鼠標(biāo)向坐下箭頭效果</a>
Example：CSS鼠標(biāo)向右下箭頭效果 <a href="#" style="cursor:s-resize">CSS鼠標(biāo)向右下箭頭效果</a>