CSS滑鼠樣式（cursor）

樱桃树下的约定發表於2024-03-11
CSS

一、CSS cursor 基本語法

cursor屬性是什麼：指滑鼠指標放在一個元素邊界範圍內時所呈現的游標形狀，它包括問號，小手等形狀。
使用時可以在任何你想要新增的標籤裡，插入style="cursor : 某屬性值" ，也可以在CSS樣式中新增。
比如：
pointer，小手形狀
help，幫助形狀 。
cursor的屬性值有十幾種可選值，在工作中根據需要選擇合適的值即可。

二、CSS cursor 屬性值

屬性值 示意圖 描述
auto 預設值，由瀏覽器根據當前上下文確定要顯示的游標樣式
default default 預設游標，不考慮上下文，通常是一個箭頭
none 不顯示游標
initial 將此屬性設定為其預設值
inherit 從父元素基礎 cursor 屬性的值
context-menu context-menu 表示上下文選單可用
help help 表示有幫助
pointer pointer 表示一個連結
progress progress 進度指示器，表示程式正在執行一些處理，但是您仍然可以在該介面進行一些操作（與 wait 不同）
wait wait 表示程式繁忙，您應該等待程式指向完成
cell cell 表示可以選擇一個單元格（或一組單元格）
crosshair crosshair 一個簡單的十字準線
text text 表示可以選擇的文字
vertical-text vertical-text 表示可以選擇的垂直文字
alias alias 表示要建立別名或快捷方式
copy copy 表示可以複製某些內容
move move 表示可以移動滑鼠下方的物件
no-drop no-drop 表示所拖動的專案不能放置在當前位置
not-allowed not-allowed 表示無法完成某事
all-scroll all-scroll 表示物件可以沿任何方向滾動（平移）
col-resize col-resize 表示可以水平調整列的大小
row-resize row-resize 表示可以垂直調整行的大小
n-resize n-resize 表示物件的邊緣可以向上（向北）移動
e-resize e-resize 表示物件的邊緣可以向右（向東）移動
s-resize s-resize 表示物件的邊緣可以向下（向南）移動
w-resize w-resize 表示物件的邊緣可以向左（向西）移動
ne-resize ne-resize 表示物件的邊緣可以向上和向右（北/東）移動
nw-resize nw-resize 表示物件的邊緣可以向上和向左（北/西）移動
se-resize se-resize 表示物件的邊緣可以向下和向右（向南/向東）移動
sw-resize sw-resize 表示物件的邊緣可以向下和向左（南/西）移動
ew-resize ew-resize 表示可以雙向調整物件大小的游標
ns-resize ns-resize
nesw-resize nesw-resize
nwse-resize nwse-resize
zoom-in zoom-in 表示可以放大某些內容
zoom-out zoom-out 表示可以縮小某些內容
grab grab 表示可以抓取（拖動）某些東西
grabbing grabbing 表示已經抓取到某些東西
url("") 自定義游標的樣式，括號中的內容為游標影像的原始檔路徑 
提示：由於計算機系統的不同，滑鼠的樣式會存在一定的差異。

舉列：
<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            height: 30px;
            border: 1px solid green;
            margin-top: 10px;
        }
        .cell {
            cursor: cell;
        }
        .crosshair {
            cursor: crosshair;
        }
        .text {
            cursor: text;
        }
        .vertical-text {
            cursor: vertical-text;
        }
        .alias {
            cursor: alias;
        }
        .copy {
            cursor: copy;
        }
        .move {
            cursor: move;
        }
        .no-drop {
            cursor: no-drop;
        }
    </style>
</head>
<body>
    <div class="cell">cursor: cell;</div>
    <div class="crosshair">cursor: crosshair;</div>
    <div class="text">cursor: text;</div>
    <div class="vertical-text">cursor: vertical-text;</div>
    <div class="alias">cursor: alias;</div>
    <div class="copy">cursor: copy;</div>
    <div class="move">cursor: move;</div>
    <div class="no-drop">cursor: no-drop;</div>
</body>
</html>

相關文章