Thay đổi con trỏ bằng CSS - Các loại con trỏ chuột và cài đặt 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でカーソルを変える

Thay đổi con trỏ bằng CSS
= Các loại con trỏ chuột và cài đặt CSS =

Trên trang web, hình dạng của con trỏ chuột hoặc con trỏ chuột có thể được đặt bằng thuộc tính CSS "cursor".
Hướng dẫn này khám phá các giá trị CSS cho các loại con trỏ khác nhau và cách cấu hình chúng.
Bạn có thể nhấp vào các thuộc tính để sao chép chúng. Trang này bao gồm thuộc tính "cursor:copy" cho các phần tử có thể sao chép.
Các hình ảnh mẫu được cung cấp cho mỗi thuộc tính. Tuy nhiên, hình dạng có thể khác nhau tùy vào phiên bản hệ điều hành và trình duyệt của bạn.
Di chuột qua các phần "Khi di chuột" để xem con trỏ xuất hiện trong môi trường của bạn.

《Cách thiết lập》

Nếu bạn muốn áp dụng cho nhiều phần trên trang, hãy viết như sau trong phần <head> hoặc trong tệp CSS bên ngoài.
".cursorstyle" là một tên lớp tùy chỉnh.

<style>
.cursorstyle {
cursor : pointer;
}
</style> Sao chép
Ví dụ áp dụng CSS trên bằng thuộc tính "class".
<span class="cursorstyle">Văn bản</span> Sao chép

<div class="cursorstyle">Văn bản</div> Sao chép

<a class="cursorstyle">Văn bản</a> Sao chép
Ví dụ khi áp dụng cho một phần hoặc một số phần tử.
Sử dụng thuộc tính "style" và viết thuộc tính trực tiếp.
<span style="cursor : pointer;">Văn bản</span> Sao chép

<div style="cursor : pointer;">Văn bản</div> Sao chép

《Các loại con trỏ và giá trị CSS》

Giá trị CSS [Nhấp để sao chép]	Mẫu trên OS [Có thể khác tùy vào trình duyệt]		Di chuột Xem trước hình dạng	Mô tả
Giá trị CSS [Nhấp để sao chép]	Windows	Mac	Di chuột Xem trước hình dạng	Mô tả
auto cursor: auto;			《Di chuột》	Trình duyệt tự động xác định con trỏ dựa trên ngữ cảnh
default cursor: default;			《Di chuột》	Hiển thị mũi tên tiêu chuẩn
none cursor: none			《Di chuột》	Không hiển thị con trỏ
context-menu cursor: context-menu			《Di chuột》	Cho phép sử dụng menu ngữ cảnh
help cursor: help			《Di chuột》	Mục trợ giúp
pointer cursor: pointer			《Di chuột》	Khi di chuột qua liên kết, v.v.
progress cursor: progress			《Di chuột》	Đang xử lý tác vụ. Người dùng có thể tương tác
wait cursor: wait			《Di chuột》	Đang xử lý tác vụ. Người dùng không thể tương tác
cell cursor: cell			《Di chuột》	Ô bảng có thể chọn
crosshair cursor: crosshair			《Di chuột》	Con trỏ chữ thập, thường dùng để chọn trên bitmap
text cursor: text			《Di chuột》	Văn bản có thể chọn
vertical-text cursor: vertical-text			《Di chuột》	Văn bản dọc có thể chọn
alias cursor: alias			《Di chuột》	Có thể tạo bí danh hoặc lối tắt
copy cursor: copy			《Di chuột》	Có thể sao chép
move cursor: move			《Di chuột》	Có thể di chuyển
no-drop cursor: no-drop			《Di chuột》	Không thể thả vào vị trí đó
not-allowed cursor: not-allowed			《Di chuột》	Không thể thực hiện hành động yêu cầu
grab cursor: grab			《Di chuột》	Có thể kéo, thường đi kèm với grabbing
grabbing cursor: grabbing			《Di chuột》	Khi đang kéo, đi kèm với grab
all-scroll cursor: all-scroll			《Di chuột》	Có thể cuộn theo bất kỳ hướng nào
col-resize cursor: col-resize			《Di chuột》	Hộp có thể thay đổi kích thước theo cạnh ngang
row-resize cursor: row-resize			《Di chuột》	Hộp có thể thay đổi kích thước theo cạnh dọc
n-resize cursor: n-resize			《Di chuột》	Hộp có thể thay đổi kích thước theo cạnh trên (bắc)
w-resize cursor: w-resize			《Di chuột》	Hộp có thể thay đổi kích thước theo cạnh trái (tây) H
s-resize cursor: s-resize			《Di chuột》	Hộp có thể thay đổi kích thước theo cạnh dưới (nam)
e-resize cursor: e-resize			《Di chuột》	Hộp có thể thay đổi kích thước theo cạnh phải (đông)
nw-resize cursor: nw-resize			《Di chuột》	Hộp có thể thay đổi kích thước theo góc trên-trái (tây bắc)
ne-resize cursor: ne-resize			《Di chuột》	Hộp có thể thay đổi kích thước theo góc trên-phải (đông bắc)
sw-resize cursor: sw-resize			《Di chuột》	Hộp có thể thay đổi kích thước theo góc dưới-trái (tây nam)
se-resize cursor: se-resize			《Di chuột》	Hộp có thể thay đổi kích thước theo góc dưới-phải (đông nam)
ew-resize cursor: ew-resize			《Di chuột》	Hộp có thể thay đổi kích thước theo cạnh ngang hai chiều
ns-resize cursor: ns-resize			《Di chuột》	Hộp có thể thay đổi kích thước theo cạnh dọc hai chiều
nesw-resize cursor: nesw-resize			《Di chuột》	Hộp có thể thay đổi kích thước theo hướng đông bắc-tây nam (trên phải & dưới trái)
nwse-resize cursor: nwse-resize			《Di chuột》	Hộp có thể thay đổi kích thước theo hướng tây bắc-đông nam (trên trái & dưới phải)
zoom-in cursor: zoom-in			《Di chuột》	Có thể phóng to
zoom-out cursor: zoom-out			《Di chuột》	Có thể thu nhỏ
URL	Bất kỳ hình ảnh nào cũng có thể được đặt làm con trỏ. Kích thước hình ảnh giới hạn ở 128 × 128px. Kích thước ảnh mẫu là 70 × 70px. 《Di chuột》 .cursorimg {cursor: url(image-path), auto;} Sao chép ".cursorimg" có thể là bất kỳ tên nào. <div {cursor: url(image-path), auto;}>Văn bản</div> Sao chép 《Hỗ trợ màn hình Retina》 .cursorimg {cursor: -webkit-image-set(url(@1x-image) 1x, url(@2x-image) 2x), auto;} Sao chép

Thay đổi con trỏ bằng CSS= Các loại con trỏ chuột và cài đặt CSS =

Thay đổi con trỏ bằng CSS
= Các loại con trỏ chuột và cài đặt CSS =

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