首頁 > web前端 > css教學 > 主體

css滑鼠樣式

藏色散人
發布: 2021-02-01 11:20:17
原創
8594 人瀏覽過

在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)
登入後複製

常用cursor遊標說明

1、div{ cursor:default }預設正常滑鼠指標

#2、div{ cursor:hand }與div{ cursor:text } 文字選擇效果

#3、div{ cursor:move } 移動選擇效果

4、div{ cursor:pointer } 手指形狀連結選擇效果

5、div{ cursor:url(url圖片位址) }設定物件為圖片

2、cursor樣式效果圖

css滑鼠樣式

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中文網其他相關文章!

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