Alterando o Cursor com CSS - Tipos de Cursores do Mouse e Configurações 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でカーソルを変える

Alterando o Cursor com CSS
= Tipos de Cursores do Mouse e Configurações CSS =

Em uma página da web, a forma do cursor do mouse ou ponteiro pode ser definida usando a propriedade CSS "cursor".
Este guia explora os valores CSS para diferentes formas de cursores e como configurá-los.
Você pode clicar nas propriedades para copiá-las. Esta página inclui a propriedade "cursor:copy" para elementos copiáveis.
Imagens de exemplo são fornecidas para cada propriedade. No entanto, a forma pode variar dependendo da versão do seu sistema operacional e do navegador.
Ao passar o mouse sobre as seções "On Mouse", você pode ver o cursor conforme ele aparece no seu ambiente.

《Como Configurar》

Se quiser aplicar a vários elementos em uma página, é comum escrever o seguinte na seção <head> ou em um arquivo CSS externo.
".cursorstyle" é um nome de classe personalizado.

<style>
.cursorstyle {
cursor : pointer;
}
</style> Copiar
Exemplo de aplicação do CSS acima usando o atributo "class".
<span class="cursorstyle">Texto</span> Copiar

<div class="cursorstyle">Texto</div> Copiar

<a class="cursorstyle">Texto</a> Copiar
Exemplo de aplicação a um único elemento ou a poucos elementos.
Use o atributo "style" e escreva a propriedade diretamente.
<span style="cursor : pointer;">Texto</span> Copiar

<div style="cursor : pointer;">Texto</div> Copiar

《Tipos de Cursor e Valores CSS》

Valores CSS [Clique para Copiar]	Exemplo no Sistema Operacional [Pode variar dependendo do navegador]		Pré-visualização da Forma ao Passar o Mouse	Descrição
Valores CSS [Clique para Copiar]	Windows	Mac	Pré-visualização da Forma ao Passar o Mouse	Descrição
auto cursor: auto;			《Passar o Mouse》	O navegador determina automaticamente o cursor com base no contexto
default cursor: default;			《Passar o Mouse》	Exibe uma seta padrão
none cursor: none			《Passar o Mouse》	Não exibe um cursor
context-menu cursor: context-menu			《Passar o Mouse》	Permite o uso de um menu de contexto
help cursor: help			《Passar o Mouse》	Item de ajuda
pointer cursor: pointer			《Passar o Mouse》	Ao passar o mouse sobre um link, etc.
progress cursor: progress			《Passar o Mouse》	Processando uma tarefa. A interação do usuário é possível
wait cursor: wait			《Passar o Mouse》	Processando uma tarefa. A interação do usuário não é possível
cell cursor: cell			《Passar o Mouse》	Célula de tabela selecionável
crosshair cursor: crosshair			《Passar o Mouse》	Cursor em cruz, frequentemente indicando seleção em um bitmap
text cursor: text			《Passar o Mouse》	Texto selecionável
vertical-text cursor: vertical-text			《Passar o Mouse》	Texto vertical selecionável
alias cursor: alias			《Passar o Mouse》	Pode criar um alias ou atalho
copy cursor: copy			《Passar o Mouse》	Copiável
move cursor: move			《Passar o Mouse》	Movível
no-drop cursor: no-drop			《Passar o Mouse》	Não pode ser solto nessa posição
not-allowed cursor: not-allowed			《Passar o Mouse》	A ação solicitada não pode ser realizada
grab cursor: grab			《Passar o Mouse》	Arrastável, geralmente combinado com grabbing
grabbing cursor: grabbing			《Passar o Mouse》	Durante o arrasto, combinado com grab
all-scroll cursor: all-scroll			《Passar o Mouse》	Pode rolar em qualquer direção
col-resize cursor: col-resize			《Passar o Mouse》	Caixa redimensionável com movimento da borda horizontal
row-resize cursor: row-resize			《Passar o Mouse》	Caixa redimensionável com movimento da borda vertical
n-resize cursor: n-resize			《Passar o Mouse》	Caixa redimensionável com movimento da borda para o norte (topo)
w-resize cursor: w-resize			《Passar o Mouse》	Caixa redimensionável com movimento da borda para o oeste (esquerda)
s-resize cursor: s-resize			《Passar o Mouse》	Caixa redimensionável com movimento da borda para o sul (parte inferior)
e-resize cursor: e-resize			《Passar o Mouse》	Caixa redimensionável com movimento da borda para o leste (direita)
nw-resize cursor: nw-resize			《Passar o Mouse》	Caixa redimensionável com movimento da borda para noroeste (superior esquerdo)
ne-resize cursor: ne-resize			《Passar o Mouse》	Caixa redimensionável com movimento da borda para nordeste (superior direito)
sw-resize cursor: sw-resize			《Passar o Mouse》	Caixa redimensionável com movimento da borda para sudoeste (inferior esquerdo)
se-resize cursor: se-resize			《Passar o Mouse》	Caixa redimensionável com movimento da borda para sudeste (inferior direito)
ew-resize cursor: ew-resize			《Passar o Mouse》	Caixa redimensionável com movimento da borda bidirecional horizontal
ns-resize cursor: ns-resize			《Passar o Mouse》	Caixa redimensionável com movimento da borda bidirecional vertical
nesw-resize cursor: nesw-resize			《Passar o Mouse》	Caixa redimensionável com movimento da borda nas direções nordeste-sudoeste (superior direito e inferior esquerdo)
nwse-resize cursor: nwse-resize			《Passar o Mouse》	Caixa redimensionável com movimento da borda nas direções noroeste-sudeste (superior esquerdo e inferior direito)
zoom-in cursor: zoom-in			《Passar o Mouse》	Pode ampliar (zoom in)
zoom-out cursor: zoom-out			《Passar o Mouse》	Pode reduzir (zoom out)
URL	Qualquer imagem pode ser definida como um cursor. O tamanho da imagem é limitado a 128 × 128px. O tamanho da imagem do exemplo é 70 × 70px. 《Passar o Mouse》 .cursorimg {cursor: url(image-path), auto;} Copiar ".cursorimg" pode ser qualquer nome. <div {cursor: url(image-path), auto;}>Texto</div> Copiar 《Suporte para Tela Retina》 .cursorimg {cursor: -webkit-image-set(url(@1x-image) 1x, url(@2x-image) 2x), auto;} Copiar

Alterando o Cursor com CSS= Tipos de Cursores do Mouse e Configurações CSS =

Alterando o Cursor com CSS
= Tipos de Cursores do Mouse e Configurações CSS =

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