使用CSS更改光标 - 光标类型和CSS设置

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

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

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

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

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

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

Simple Yet Powerful Note Tool - メモメモ

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

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

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

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

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

Text Counter - 文字数カウント

Notepad - メモ帳

原稿用紙エディター

俳句・短歌下書きツール

ウィンドウサイズ

インターネット環境

タブを再び開く

Webページ最新状態

ページ内文字検索

スマホページ内検索

画像を加工する

Macでカラーコードを調べ

Mac用解凍ソフト

ショートカット

コピペの方法

右クリック禁止を回避

ローマ字かな入力変換表

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

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

ファイル差分チェック

音声合成

テキスト読み上げ

テキスト読み上げ書き方

全国公衆電話の場所

よく使う記号

キーボードの記号

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

操作で使うキーの名称

CSSでカーソルを変える

使用CSS更改光标
= 光标类型和CSS设置 =

在网页上，可以使用CSS属性"cursor"设置鼠标光标或鼠标指针的形状。
本指南探讨了不同光标形状的CSS值及其配置方法。
您可以点击属性以复制它们。本页面包含了可复制元素的属性"cursor:copy"。
为每个属性提供了示例图像。然而，形状可能因操作系统版本和浏览器的不同而有所差异。
将鼠标悬停在"On Mouse"部分上，您可以看到在您的环境中显示的光标。

《如何设置》

如果您想将其应用于页面上的多个部分，通常的做法是在<head>部分或外部CSS文件中编写以下内容。
".cursorstyle"是自定义类名。

<style>
.cursorstyle {
cursor : pointer;
}
</style> 复制
使用"class"属性应用上述CSS的示例。
<span class="cursorstyle">文本</span> 复制

<div class="cursorstyle">文本</div> 复制

<a class="cursorstyle">文本</a> 复制
应用于单个部分或少数元素的示例。
使用"style"属性并直接编写属性。
<span style="cursor : pointer;">文本</span> 复制

<div style="cursor : pointer;">文本</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;}>Text</div> 复制《视网膜显示支持》 .cursorimg {cursor: -webkit-image-set(url(@1x-image) 1x, url(@2x-image) 2x), auto;} 复制

使用CSS更改光标= 光标类型和CSS设置 =

使用CSS更改光标
= 光标类型和CSS设置 =

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