css滑鼠樣式cursor的講解

這篇文章主要介紹了關於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是由系統自動給出效果

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！

相關推薦：

如何使用css transition屬性實現帶動畫顯隱的小程式組件

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