Изменение курсора с помощью 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> Копировать
Пример применения вышеуказанного CSS с использованием атрибута "class".
<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			《Ховер》	Перемещаемый, обычно в паре с grab
grabbing cursor: grabbing			《Ховер》	Во время перетаскивания, в паре с grab
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 Display》 .cursorimg {cursor: -webkit-image-set(url(@1x-image) 1x, url(@2x-image) 2x), auto;} Копировать

Изменение курсора с помощью CSS= Типы курсоров мыши и настройки CSS =

Изменение курсора с помощью CSS
= Типы курсоров мыши и настройки CSS =

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