DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 巧用CSS控制鼠標樣式變換
巧用CSS控制鼠標樣式變換
編輯:CSS詳解     

    主頁上的鼠標是不是就只有箭頭和小手兩種模樣呢?如果鼠標移到“幫助”等字樣上時,形狀就變成求助的問號;鼠標移到可能需要較長時間等待的超鏈接時,鼠標形狀就變成等待的樣子……那該多好啊!

  其實,借助我們的CSS,幾句很簡單的代碼就可以實現這一切!

  不信?把鼠標移到下面的演示文字上看看效果吧!

  演示:手形

  源代碼:<P style="CURSOR: hand">演示:手形</P>

  演示:移動

  源代碼:<p style=cursor:move>演示:移動</p>

  演示:等待

  源代碼:<P style="CURSOR: wait">等待狀態</P>

  演示:定位指示

  源代碼:<P style="CURSOR: crosshair">演示:定位指示</P>

  演示:幫助

  源代碼:<P style="CURSOR: help">演示:幫助<P>

  是不是簡單又方便?這裡我們只用到了CSS中的“cursor”屬性,利用“style=cursor:值”這樣的語句形式,分別設置具體的值就可以了。例如:值為“hand”時,當鼠標移到相應的文字或圖片上時,就會變成超鏈接的小手形;值為“move”時,當鼠標移到相應的文字或圖片上時,就會變成上下左右帶方向箭頭的形狀,依此類推。這個小技巧也許可以在你制作主頁時幫上一點忙呢!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved