CSS カーソルcursor_html/css_WEB-ITnose

× ディレクトリ [1] 定義 [2] 標準スタイル [3] 拡張スタイル [4] プライベート スタイル [5] 定義スタイル [6] 共通アプリケーション

前の単語

ブラウザでは、カーソルは次の目的で使用されます。インタラクションを提供します フィードバックは役に立ちます。シーンごとにカーソルを変えることで、異なる意味を持たせることができます。

カーソル

値: []*[デフォルト | nw-resize | | sw-resize | s-resize | ヘルプ | 進行状況]] 初期値: auto

継承: はい

CSS2 では選択肢が比較的少ない

url: 自定义光标的URLdefault: 默认光标，通常是一个箭头auto: 浏览器自动识别的光标crosshair : 十字线pointer: 手型指针move: 移动指针e-resize: 向东移动指针ne-resize: 向东北移动指针nw-resize: 向西北移动指针n-resize: 向北移动指针se-resize: 向东南移动指针sw-resize: 向西南移动指针s-resize: 向南移动指针w-resize: 向西移动指针text: 文本指针wait: 指示程序正忙help: 帮助指针

拡張スタイル

プライベート スタイル

一部のブラウザでは、ブラウザ プレフィックスを追加するプライベート スタイルも提供されています

[注] Safari は -webkit-grab と -webkit- を解釈しますとしてつかむdefault

cursor:none (not IE8, Safari)cursor:context-menu (not Safari,Firefox,Chrome)cursor:cell (not Safari)cursor:alias (not Safari)cursor:copy (not IE,Safari)cursor:grab (not IE,Safari,Chrome)cursor:grabbing (not IE,Safari,Chrome)cursor:zoom-in (not IE,Safari)cursor:zoom-out (not IE,Safari)cursor:vertical-textcursor:no-dropcursor:not-allowedcursor:all-scrollcursor:ew-resizecursor:ns-resizecursor:nesw-resizecursor:nwse-resizecursor:col-resizecursor:row-resize

Custom style

すべてのブラウザは、拡張子 .cur が付いたファイルの使用をサポートしています。Chrome、Firefox、Safari は、カーソルを作成するための通常の画像の使用もサポートしています

[注] カスタマイズするには URL を使用します。スタイル。その後にカンマと共通のキーワードが続きます。

cursor:-webkit-grab; cursor: -moz-grab;cursor:-webkit-grabbing; cursor: -moz-grabbing;cursor:-webkit-zoom-in; cursor: -moz-zoom-in;cursor:-webkit-zoom-out; cursor: -moz-zoom-out;    

Common Applications

リンクのデフォルトのカーソルはハンドポインタです。カーソルを変更すると、訪問者にその要素であることを明確に知らせることができます。はクリック可能です

要素の title 属性は、要素の追加情報を提供するために使用されます ヘルプ カーソルを使用すると、より適切に表現できます

//错误cursor: url('m.cur');//正确cursor: url('m.cur'),auto;

span[title]{    cursor: help;    border-bottom: 1px solid gray;}