使用CSS更改游標 - 游標類型與CSS設置

Table of Contents - Tips - いろいろ目次: Sitemap Generator - サイトマップ生成プログラム

Google Fonts - 言語設定一覧

Password Strength - パスワード強度

In-Page Search - 検索を自ページ設置

Download Counter - ダウンロードカウンター

Draft Manager - ブラウザで下書き保存

Text Encryption - テキスト暗号・復号化

CSS & JavaScript - 圧縮・整形/復元ツール

Simple Yet Powerful Note Tool - メモメモ

Task Management - 仕事/やること管理

Pomodoro Timer - ポモドーロタイマー

  Changing Cursor - CSSでカーソルを変える

Local Storage Check - ローカルストレージチェック

Pixel Art - ピクセルアート作成

Freehand Drawing - フリーハンドドローイング

Text Counter - 文字数カウント

Notepad - メモ帳

Check Window Size - ウィンドウサイズを調べる

  Mix 2 colors - 2色を混ぜる

  Mix 5 colors - 5色を混ぜる

原稿用紙エディター

俳句・短歌下書きツール

インターネット環境

タブを再び開く

Webページ最新状態

ページ内文字検索

スマホページ内検索

画像を加工する

Macでカラーコードを調べる

Mac用解凍ソフト

ショートカット

コピペの方法

右クリック禁止を回避

ローマ字かな入力変換表

ひらがな→ヘボン式ローマ字変換

ウェブページで長音ローマ字

ファイル差分チェック

音声合成

テキスト読み上げ

テキスト読み上げ書き方

全国公衆電話の場所

よく使う記号

キーボードの記号

キーボードの記号と入力方法

操作で使うキーの名称

使用CSS更改游標
= 游標類型與CSS設置 =

在網頁上，可以使用CSS屬性"cursor"設置鼠標游標或鼠標指針的形狀。
本指南探討了不同游標形狀的CSS值以及如何配置它們。
您可以點擊屬性以複製它們。此頁面包含屬性"cursor:copy"，用於可複製的元素。
每個屬性都提供了範例圖片。然而，形狀可能會根據您的操作系統版本和瀏覽器的不同而有所不同。
將鼠標懸停在"On Mouse"部分上，您可以查看在您環境中顯示的游標。

《如何設置》

如果您希望將其應用於頁面上的多個區域，通常的做法是在<head>區域或外部CSS文件中寫入以下代碼。
".cursorstyle"是自定義類名。

<style>
.cursorstyle {
cursor : pointer;
}
</style> 複製
使用"class"屬性應用上述CSS的範例。
<span class="cursorstyle">Text</span> 複製

<div class="cursorstyle">Text</div> 複製

<a class="cursorstyle">Text</a> 複製
應用於單一區域或少數元素的範例。
使用"style"屬性並直接寫入屬性。
<span style="cursor : pointer;">Text</span> 複製

<div style="cursor : pointer;">Text</div> 複製

《游標類型與CSS值》

CSS值 [點擊以複製]	作業系統中的範例 [可能會根據瀏覽器而有所不同]		滑鼠懸停形狀預覽	描述
CSS值 [點擊以複製]	Windows	Mac	滑鼠懸停形狀預覽	描述
auto cursor: auto;			《滑鼠懸停》	瀏覽器根據上下文自動決定游標
default cursor: default;			《滑鼠懸停》	顯示標準箭頭
none cursor: none			《滑鼠懸停》	不顯示游標
context-menu cursor: context-menu			《滑鼠懸停》	允許使用右鍵菜單
help cursor: help			《滑鼠懸停》	幫助項目
pointer cursor: pointer			《滑鼠懸停》	當懸停於連結等時
progress cursor: progress			《滑鼠懸停》	處理任務。用戶可以互動
wait cursor: wait			《滑鼠懸停》	處理任務。用戶無法互動
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			《滑鼠懸停》	無法在該位置放置
not-allowed cursor: not-allowed			《滑鼠懸停》	請求的動作無法執行
grab cursor: grab			《滑鼠懸停》	可拖動，通常與抓取配對使用
grabbing cursor: grabbing			《滑鼠懸停》	在拖動過程中，與抓取配對使用
all-scroll cursor: all-scroll			《滑鼠懸停》	可以向任何方向滾動
col-resize cursor: col-resize			《滑鼠懸停》	具有水平邊緣移動的可調大小框
row-resize cursor: row-resize			《滑鼠懸停》	具有垂直邊緣移動的可調大小框
n-resize cursor: n-resize			《滑鼠懸停》	具有朝北（上）方向邊緣移動的可調大小框
w-resize cursor: w-resize			《滑鼠懸停》	具有朝西（左）方向邊緣移動的可調大小框
s-resize cursor: s-resize			《滑鼠懸停》	具有朝南（下）方向邊緣移動的可調大小框
e-resize cursor: e-resize			《滑鼠懸停》	具有朝東（右）方向邊緣移動的可調大小框
nw-resize cursor: nw-resize			《滑鼠懸停》	具有朝西北（左上）方向邊緣移動的可調大小框
ne-resize cursor: ne-resize			《滑鼠懸停》	具有朝東北（右上）方向邊緣移動的可調大小框
sw-resize cursor: sw-resize			《滑鼠懸停》	具有朝西南（左下）方向邊緣移動的可調大小框
se-resize cursor: se-resize			《滑鼠懸停》	具有朝東南（右下）方向邊緣移動的可調大小框
ew-resize cursor: ew-resize			《滑鼠懸停》	具有雙向水平邊緣移動的可調大小框
ns-resize cursor: ns-resize			《滑鼠懸停》	具有雙向垂直邊緣移動的可調大小框
nesw-resize cursor: nesw-resize			《滑鼠懸停》	具有朝東北-西南（右上與左下）方向邊緣移動的可調大小框
nwse-resize cursor: nwse-resize			《滑鼠懸停》	具有朝西北-東南（左上與右下）方向邊緣移動的可調大小框
zoom-in cursor: zoom-in			《滑鼠懸停》	可以放大
zoom-out cursor: zoom-out			《滑鼠懸停》	可以縮小
URL	任何圖像都可以設置為游標。圖像大小限制為128 × 128px。範例圖像大小為70 × 70px。《滑鼠懸停》 .cursorimg {cursor: url(image-path), auto;} 複製 ".cursorimg"可以是任何名稱。 <div {cursor: url(image-path), auto;}>文字</div> 複製《Retina顯示支援》 .cursorimg {cursor: -webkit-image-set(url(@1x-image) 1x, url(@2x-image) 2x), auto;} 複製

使用CSS更改游標= 游標類型與CSS設置 =

使用CSS更改游標
= 游標類型與CSS設置 =

おすすめサイト・関連サイト…