Modifica del cursore con CSS - Tipi di cursori del mouse e impostazioni 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でカーソルを変える

Modifica del cursore con CSS
= Tipi di cursori del mouse e impostazioni CSS =

Sulla pagina web, la forma del cursore del mouse o del puntatore del mouse può essere impostata utilizzando la proprietà CSS "cursor".
Questa guida esplora i valori CSS per diverse forme di cursore e come configurarli.
Puoi fare clic sulle proprietà per copiarle. Questa pagina include la proprietà "cursor:copy" per gli elementi copiabili.
Immagini esemplificative sono fornite per ogni proprietà. Tuttavia, la forma potrebbe differire a seconda della versione del sistema operativo e del browser.
Passando sopra le sezioni "On Mouse" puoi vedere il cursore come appare nel tuo ambiente.

《Come impostare》

Se desideri applicarlo a più sezioni di una pagina, è pratica comune scrivere quanto segue nella sezione <head> o in un file CSS esterno.
".cursorstyle" è un nome di classe personalizzato.

<style>
.cursorstyle {
cursor : pointer;
}
</style> Copia
Esempio di applicazione del CSS sopra usando l'attributo "class".
<span class="cursorstyle">Testo</span> Copia

<div class="cursorstyle">Testo</div> Copia

<a class="cursorstyle">Testo</a> Copia
Esempio di applicazione a una singola sezione o a pochi elementi.
Usa l'attributo "style" e scrivi direttamente la proprietà.
<span style="cursor : pointer;">Testo</span> Copia

<div style="cursor : pointer;">Testo</div> Copia

《Cursor Types and CSS Values》

Valori CSS [Clicca per copiare]	Esempio su OS [Può variare a seconda del browser]		Passare il mouse Anteprima forma	Descrizione
Valori CSS [Clicca per copiare]	Windows	Mac	Passare il mouse Anteprima forma	Descrizione
auto cursor: auto;			《Mouse-Over》	Il browser determina automaticamente il cursore in base al contesto
default cursor: default;			《Mouse-Over》	Mostra una freccia standard
none cursor: none			《Mouse-Over》	Non mostra un cursore
context-menu cursor: context-menu			《Mouse-Over》	Permette l'uso di un menu contestuale
help cursor: help			《Mouse-Over》	Elemento di aiuto
pointer cursor: pointer			《Mouse-Over》	Quando si passa sopra un link, ecc.
progress cursor: progress			《Mouse-Over》	Elaborazione di un'attività. L'interazione dell'utente è possibile
wait cursor: wait			《Mouse-Over》	Elaborazione di un'attività. L'interazione dell'utente non è possibile
cell cursor: cell			《Mouse-Over》	Cella selezionabile della tabella
crosshair cursor: crosshair			《Mouse-Over》	Cursore a croce, spesso indicante una selezione su un'immagine bitmap
text cursor: text			《Mouse-Over》	Testo selezionabile
vertical-text cursor: vertical-text			《Mouse-Over》	Testo verticale selezionabile
alias cursor: alias			《Mouse-Over》	Può creare un alias o una scorciatoia
copy cursor: copy			《Mouse-Over》	Copiabile
move cursor: move			《Mouse-Over》	Movibile
no-drop cursor: no-drop			《Mouse-Over》	Non può essere rilasciato in quella posizione
not-allowed cursor: not-allowed			《Mouse-Over》	L'azione richiesta non può essere eseguita
grab cursor: grab			《Mouse-Over》	Trascinabile, di solito abbinato a grabbing
grabbing cursor: grabbing			《Mouse-Over》	Durante il trascinamento, abbinato a grab
all-scroll cursor: all-scroll			《Mouse-Over》	Può scorrere in qualsiasi direzione
col-resize cursor: col-resize			《Mouse-Over》	Riquadro ridimensionabile con movimento orizzontale del bordo
row-resize cursor: row-resize			《Mouse-Over》	Riquadro ridimensionabile con movimento verticale del bordo
n-resize cursor: n-resize			《Mouse-Over》	Riquadro ridimensionabile con movimento del bordo verso il nord (alto)
w-resize cursor: w-resize			《Mouse-Over》	Riquadro ridimensionabile con movimento del bordo verso l'ovest (sinistra)
s-resize cursor: s-resize			《Mouse-Over》	Riquadro ridimensionabile con movimento del bordo verso il sud (basso)
e-resize cursor: e-resize			《Mouse-Over》	Riquadro ridimensionabile con movimento del bordo verso l'est (destra)
nw-resize cursor: nw-resize			《Mouse-Over》	Riquadro ridimensionabile con movimento del bordo verso il nord-ovest (alto-sinistra)
ne-resize cursor: ne-resize			《Mouse-Over》	Riquadro ridimensionabile con movimento del bordo verso il nord-est (alto-destra)
sw-resize cursor: sw-resize			《Mouse-Over》	Riquadro ridimensionabile con movimento del bordo verso il sud-ovest (basso-sinistra)
se-resize cursor: se-resize			《Mouse-Over》	Riquadro ridimensionabile con movimento del bordo verso il sud-est (basso-destra)
ew-resize cursor: ew-resize			《Mouse-Over》	Riquadro ridimensionabile con movimento del bordo bidirezionale orizzontale
ns-resize cursor: ns-resize			《Mouse-Over》	Riquadro ridimensionabile con movimento del bordo bidirezionale verticale
nesw-resize cursor: nesw-resize			《Mouse-Over》	Riquadro ridimensionabile con movimento del bordo nelle direzioni nord-est-sud-ovest (alto-destra & basso-sinistra)
nwse-resize cursor: nwse-resize			《Mouse-Over》	Riquadro ridimensionabile con movimento del bordo nelle direzioni nord-ovest-sud-est (alto-sinistra & basso-destra)
zoom-in cursor: zoom-in			《Mouse-Over》	Può fare zoom avanti
zoom-out cursor: zoom-out			《Mouse-Over》	Può fare zoom indietro
URL	Ogni immagine può essere impostata come cursore. La dimensione dell'immagine è limitata a 128 × 128px. La dimensione dell'immagine di esempio è 70 × 70px. 《Mouse-Over》 .cursorimg {cursor: url(image-path), auto;} Copia ".cursorimg" può essere qualsiasi nome. <div {cursor: url(image-path), auto;}>Testo</div> Copia 《Supporto per Retina Display》 .cursorimg {cursor: -webkit-image-set(url(@1x-image) 1x, url(@2x-image) 2x), auto;} Copia

Modifica del cursore con CSS= Tipi di cursori del mouse e impostazioni CSS =

Modifica del cursore con CSS
= Tipi di cursori del mouse e impostazioni CSS =

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