在css中可以透過cursor屬性來設定滑鼠樣式,其實作方法如:先建立一個HTML範例檔;然後定義一些span標籤,並給span標籤分別加上style屬性;最後透過設定不同的cursor屬性值來實現不同的滑鼠樣式即可。
本文操作環境:宏基S40-51、Windows10 家庭中文版、HTML5&&CSS3&&HBuilderX.3.0.5
##推薦:《css影片教學》
css寫入滑鼠樣式
我們在DIV CSS佈局時候,我們會遇到對物件內滑鼠指標遊標進行控制,例如滑鼠經過指標變成手指形狀等樣式,接下來我們介紹滑鼠指標樣式cursor控制。系統預設滑鼠指針樣式外,可以透過CSS設定圖片為滑鼠指針,常見有些網站滑鼠指標是各種小圖片樣式,當然這個是透過css cursor設定滑鼠樣式。1、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)
2、cursor樣式效果圖
3、滑鼠指標說明cursor設定或檢索在物件上移動的滑鼠指標採用何種系統預先定義的遊標形狀。 4、佈局結構p { cursor: text; } /* css注释: 设置鼠标移动到html p对象时鼠标变为文本选择样式 */ a { cursor: pointer; } /* css注释: 设置鼠标移动到a超链接对象时鼠标变为手指形状(链接选择) */ body { cursor: url("小图片地址")} /* 设置鼠标指针默认为一个小图片 */
一些不同的遊標的程式碼範例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css鼠标样式</title> </head> <body> <p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p> <span style="cursor:auto">auto:默认,浏览器设置的光标。</span><br> <span style="cursor:crosshair">crosshair:光标呈现为十字线。</span><br> <span style="cursor:default">default:默认光标(通常是一个箭头)</span><br> <span style="cursor:e-resize">e-resize:此光标指示矩形框的边缘可被向右(东)移动。</span><br> <span style="cursor:help">help:此光标指示可用的帮助(通常是一个问号或一个气球)。</span><br> <span style="cursor:move">move:此光标指示某对象可被移动。</span><br> <span style="cursor:n-resize">n-resize:此光标指示矩形框的边缘可被向上(北)移动。</span><br> <span style="cursor:ne-resize">ne-resize:此光标指示矩形框的边缘可被向上及向右移动(北/东)。</span><br> <span style="cursor:nw-resize">nw-resize:此光标指示矩形框的边缘可被向上及向左移动(北/西)。</span><br> <span style="cursor:pointer">pointer:光标呈现为指示链接的指针(一只手)</span><br> <span style="cursor:progress">progress</span><br> <span style="cursor:s-resize">s-resize:此光标指示矩形框的边缘可被向下移动(南)。</span><br> <span style="cursor:se-resize">se-resize:此光标指示矩形框的边缘可被向下及向右移动(南/东)。</span><br> <span style="cursor:sw-resize">sw-resize:此光标指示矩形框的边缘可被向下及向左移动(南/西)。</span><br> <span style="cursor:text">text:此光标指示文本。</span><br> <span style="cursor:w-resize">w-resize:此光标指示矩形框的边缘可被向左移动(西)。</span><br> <span style="cursor:wait">wait:此光标指示程序正忙(通常是一只表或沙漏)。</span><br> </body> </html>
程式教學! !
以上是css滑鼠樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章!