Зміна курсора за допомогою 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> Copy
Приклад застосування вищезгаданого CSS за допомогою атрибута "class".
<span class="cursorstyle">Text</span> Copy

<div class="cursorstyle">Text</div> Copy

<a class="cursorstyle">Text</a> Copy
Приклад застосування до одного розділу або кількох елементів.
Використовуйте атрибут "style" і пишіть властивість безпосередньо.
<span style="cursor : pointer;">Text</span> Copy

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

《Типи курсора та значення 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
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;}>Text</div> Копіювати 《Підтримка Retina Display》 .cursorimg {cursor: -webkit-image-set(url(@1x-image) 1x, url(@2x-image) 2x), auto;} Копіювати

Зміна курсора за допомогою CSS= Типи курсорів миші та налаштування CSS =

Зміна курсора за допомогою CSS
= Типи курсорів миші та налаштування CSS =

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