首頁 > web前端 > css教學 > css滑鼠樣式cursor的講解

css滑鼠樣式cursor的講解

不言
發布: 2018-06-12 11:07:22
原創
2543 人瀏覽過

這篇文章主要介紹了關於css滑鼠樣式cursor的講解,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

巧合要用到滑鼠樣式效果,就順便整理了下十五種CSS 滑鼠樣式,小例子供大家使用啊

CSS滑鼠樣式語法如下:

任何標籤插入style="cursor: *" 
範例:

<span style="cursor:*">文本或其它页面元素</span>  <a href="#" style="cursor:*">文本或其它页面元素</a>
登入後複製

注意把* 換成如下15個效果的一種:

以下是對這15種效果的解釋。移動滑鼠到解釋上面,看看你的滑鼠起了什麼變化吧!

hand是手型   
範例:CSS滑鼠手型效果  

 <a href="#" _fcksavedurl=""#"" _fcksavedurl=""#"" _fcksavedurl=""#"" _fcksavedurl=""#"" style="cursor:hand">CSS鼠标手型效果</a>
登入後複製

pointer也是手型,這裡建議使用這種,因為這可以在多種瀏覽器下使用。
範例:CSS滑鼠手型效果

<a href="#" _fcksavedurl=""#"" _fcksavedurl=""#"" style="cursor:pointer">CSS鼠标手型效果</a>
登入後複製

crosshair是十字型
範例:CSS滑鼠十字型效果

<a href="#" _fcksavedurl=""#"" _fcksavedurl=""#"" style="cursor:crosshair">CSS鼠标十字型 效果</a>
登入後複製

help是問號
範例:CSS滑鼠問號效果

<a href="#" _fcksavedurl=""#"" style="cursor:help">CSS鼠标问号效果</a>
登入後複製

下面寫法都一樣,這裡就不一一寫完了。
以下是對這15種效果的解釋。移動滑鼠到解釋上面,看看你的滑鼠起了什麼變化吧!
hand是手型
pointer也是手型,這裡推薦使用這種,因為這可以在多種瀏覽器下使用。
crosshair是十字型
text是移動到文字上的那種效果
wait是等待的那種效果
default是預設效果
help是問號
e-resize是向右的箭頭
ne-resize是向右上的箭頭
n-resize是向上的箭頭
nw-resize是向左上的箭頭
w-resize是向左的箭頭
sw-resize是左下的箭頭
s-resize是向下的箭頭
se-resize是向右下的箭頭
auto是由系統自動給予效果

以上就是本文的全部內容,希望對大家的學習有幫助,更多相關內容請關注PHP中文網!

相關推薦:

如何使用css transition屬性實作有動畫顯隱的微信小程式元件

css中border屬性之製作網頁虛線

#

以上是css滑鼠樣式cursor的講解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板