CSS鼠標(biāo)樣式（cursor）

167476 閱讀 0 評(píng)論 0 點(diǎn)贊

在頁(yè)面布局時(shí)，CSS是工作中必不可少的部分，常聽(tīng)別人講：HTML是一個(gè)人素顏的樣子，加了CSS后是一個(gè)人化妝以后的樣子。這句話通俗易懂，很好的詮釋了CSS與HTML之間的關(guān)系。

CSS中的屬性非常多，本篇主要講解的是CSS鼠標(biāo)樣式，即CSS cursor屬性，以及它的很多可選值，比如：cursor 手型就是用的 cursor:pointer 這個(gè)屬性。

一、CSS cursor 基本語(yǔ)法

cursor屬性是什么：指鼠標(biāo)指針?lè)旁谝粋€(gè)元素邊界范圍內(nèi)時(shí)所呈現(xiàn)的光標(biāo)形狀，它包括問(wèn)號(hào)，小手等形狀。

使用時(shí)可以在任何你想要添加的標(biāo)簽里，插入style="cursor : 某屬性值" ，也可以在CSS樣式中添加。

比如：

pointer，小手形狀

help，幫助形狀。

cursor的屬性值有十幾種可選值，在工作中根據(jù)需要選擇合適的值即可。

二、CSS cursor 屬性值

屬性值	示意圖	描述
auto		默認(rèn)值，由瀏覽器根據(jù)當(dāng)前上下文確定要顯示的光標(biāo)樣式
default		默認(rèn)光標(biāo)，不考慮上下文，通常是一個(gè)箭頭
none		不顯示光標(biāo)
initial		將此屬性設(shè)置為其默認(rèn)值
inherit		從父元素基礎(chǔ) cursor 屬性的值
context-menu		表示上下文菜單可用
help		表示有幫助
pointer		表示一個(gè)鏈接
progress		進(jìn)度指示器，表示程序正在執(zhí)行一些處理，但是您仍然可以在該界面進(jìn)行一些操作（與 wait 不同）
wait		表示程序繁忙，您應(yīng)該等待程序指向完成
cell		表示可以選擇一個(gè)單元格（或一組單元格）
crosshair		一個(gè)簡(jiǎn)單的十字準(zhǔn)線
text		表示可以選擇的文本
vertical-text		表示可以選擇的垂直文本
alias		表示要?jiǎng)?chuàng)建別名或快捷方式
copy		表示可以復(fù)制某些內(nèi)容
move		表示可以移動(dòng)鼠標(biāo)下方的對(duì)象
no-drop		表示所拖動(dòng)的項(xiàng)目不能放置在當(dāng)前位置
not-allowed		表示無(wú)法完成某事
all-scroll		表示對(duì)象可以沿任何方向滾動(dòng)（平移）
col-resize		表示可以水平調(diào)整列的大小
row-resize		表示可以垂直調(diào)整行的大小
n-resize		表示對(duì)象的邊緣可以向上（向北）移動(dòng)
e-resize		表示對(duì)象的邊緣可以向右（向東）移動(dòng)
s-resize		表示對(duì)象的邊緣可以向下（向南）移動(dòng)
w-resize		表示對(duì)象的邊緣可以向左（向西）移動(dòng)
ne-resize		表示對(duì)象的邊緣可以向上和向右（北/東）移動(dòng)
nw-resize		表示對(duì)象的邊緣可以向上和向左（北/西）移動(dòng)
se-resize		表示對(duì)象的邊緣可以向下和向右（向南/向東）移動(dòng)
sw-resize		表示對(duì)象的邊緣可以向下和向左（南/西）移動(dòng)
ew-resize		表示可以雙向調(diào)整對(duì)象大小的光標(biāo)
ns-resize
nesw-resize
nwse-resize
zoom-in		表示可以放大某些內(nèi)容
zoom-out		表示可以縮小某些內(nèi)容
grab		表示可以抓?。ㄍ蟿?dòng)）某些東西
grabbing		表示已經(jīng)抓取到某些東西
url("")		自定義光標(biāo)的樣式，括號(hào)中的內(nèi)容為光標(biāo)圖像的源文件路徑

提示：由于計(jì)算機(jī)系統(tǒng)的不同，鼠標(biāo)的樣式會(huì)存在一定的差異。

舉例：

<!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>

大家可以運(yùn)行看看，非常直觀。

點(diǎn)贊(0)