CSS3新的鼠標(biāo)樣式介紹

2012/1/30 12:25:22  出處：本站   人氣：72次    字號(hào)：小  中  大

 在Web開發(fā)的早期，隨著新技術(shù)的不斷涌現(xiàn)，一切都讓人興奮。但是我們?cè)谶^(guò)去十年里經(jīng)歷了一個(gè)技術(shù)的停滯期，直到由于HTML5的出現(xiàn)，Web開發(fā)再次讓人著迷。特別是CSS3正在迅速發(fā)展，你會(huì)在其規(guī)范里發(fā)現(xiàn)許多有趣的寶物。

        在這篇文章里，我們要研究的是CSS鼠標(biāo)樣式屬性，正如你所期望的的一樣，它允許你改變?cè)谝粋�(gè)元素上移動(dòng)鼠標(biāo)時(shí)的指針樣式。 它對(duì)于交互式Web App來(lái)說(shuō)已經(jīng)變得越來(lái)越重要。

CSS2的鼠標(biāo)樣式

        CSS2中提供相對(duì)較少的選擇（懸停在不同的網(wǎng)頁(yè)元素上，看看鼠標(biāo)指針樣式是如何變化的）：

[html] view plaincopy
cursor: auto 
cursor: inherit 
cursor: crosshair 
cursor: default 
cursor: help 
cursor: move 
cursor: pointer 
cursor: progress 
cursor: text 
cursor: wait 
cursor: e-resize 
cursor: ne-resize 
cursor: nw-resize 
cursor: n-resize 
cursor: se-resize 
cursor: sw-resize 
cursor: s-resize 
cursor: w-resize 
CSS3的鼠標(biāo)樣式

        在CSS3里我們有更多的樣式可供選擇。它們可以工作在IE9和火狐、Chrome、Safari、Opera的最新版本上（除非另有標(biāo)注）：

[html] view plaincopy
cursor:none (not IE, Safari, Opera) 
cursor:context-menu (not Firefox, Chrome) 
cursor:cell (not Safari) 
cursor:vertical-text 
cursor:alias (not Safari) 
cursor:copy (not Safari) 
cursor:no-drop 
cursor:not-allowed 
cursor:ew-resize 
cursor:ns-resize 
cursor:nesw-resize 
cursor:nwse-resize 
cursor:col-resize 
cursor:row-resize 
cursor:all-scroll 
瀏覽器特定指針

        Mozilla和Chrome、Safari的某些版本中提供了一些私有樣式，這很可能成為CSS3規(guī)范的一部分：

[html] view plaincopy
cursor:-webkit-grab; cursor: -moz-grab; 
cursor:-webkit-grabbing; cursor: -moz-grabbing; 
cursor:-webkit-zoom-in; cursor: -moz-zoom-in; 
cursor:-webkit-zoom-out; cursor: -moz-zoom-out; 
創(chuàng)建你自己的指針

        最后，你可以創(chuàng)建自己的指針圖形，例如：

[html] view plaincopy
cursor:url(images/cursor.cur); 
cursor:url(images/cursor.png) x y, auto; 
        注意：

        1.    Internet Explorer需要一個(gè)Windows指針文件（.cur）。

        2.    火狐、Chrome和Safari需要一幅圖像 - 我推薦使用一張24位Alpha透明的png圖片。

        3.    Firefox還需要一個(gè)非URL指針設(shè)置作為備用值。

        4.    Opera不支持這種寫法。

        5.    x和y是Firefox、Chrome和Safari中的可選屬性，它定義了圖像從左上角開始的精確指針位置。如果省略，都默認(rèn)為0。

        挺好，但它看起來(lái)會(huì)花費(fèi)我太多精力！所以我會(huì)一直堅(jiān)持使用標(biāo)準(zhǔn)的指針樣式...