Cambiar el cursor con CSS - Tipos de cursores de ratón y configuraciones de 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でカーソルを変える

Cambiar el cursor con CSS
= Tipos de cursores de ratón y configuraciones de CSS =

En una página web, la forma del cursor del ratón o el puntero del ratón se puede configurar utilizando la propiedad CSS "cursor".
Esta guía explora los valores de CSS para diferentes formas de cursores y cómo configurarlos.
Puedes hacer clic en las propiedades para copiarlas. Esta página incluye la propiedad "cursor:copy" para elementos copiables.
Se proporcionan imágenes de muestra para cada propiedad. Sin embargo, la forma puede diferir según la versión de tu sistema operativo y navegador.
Pon el cursor sobre las secciones marcadas como "On Mouse" para ver cómo se muestra el cursor en tu entorno.

《Cómo Configurar》

Si deseas aplicarlo a varias secciones en una página, es común escribir lo siguiente en la sección <head> o en un archivo CSS externo.
".cursorstyle" es un nombre de clase personalizado.

<style>
.cursorstyle {
cursor : pointer;
}
</style> Copiar
Ejemplo de aplicación del CSS anterior usando el atributo "class".
<span class="cursorstyle">Texto</span> Copiar

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

<a class="cursorstyle">Texto</a> Copiar
Ejemplo cuando se aplica a una sola sección o a unos pocos elementos.
Usa el atributo "style" y escribe la propiedad directamente.
<span style="cursor : pointer;">Texto</span> Copiar

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

《Tipos de cursor y valores CSS》

Valores de CSS [Haga clic para copiar]	Ejemplo en el sistema operativo [Puede variar según el navegador]		Vista previa de la forma al pasar el ratón	Descripción
Valores de CSS [Haga clic para copiar]	Windows	Mac	Vista previa de la forma al pasar el ratón	Descripción
auto cursor: auto;			《Mouse-Over》	El navegador determina automáticamente el cursor según el contexto
default cursor: default;			《Mouse-Over》	Muestra una flecha estándar
none cursor: none			《Mouse-Over》	No muestra un cursor
context-menu cursor: context-menu			《Mouse-Over》	Permite el uso de un menú contextual
help cursor: help			《Mouse-Over》	Elemento de ayuda
pointer cursor: pointer			《Mouse-Over》	Cuando se pasa el cursor sobre un enlace, etc.
progress cursor: progress			《Mouse-Over》	Procesando una tarea. La interacción del usuario es posible
wait cursor: wait			《Mouse-Over》	Procesando una tarea. La interacción del usuario no es posible
cell cursor: cell			《Mouse-Over》	Celda de tabla seleccionable
crosshair cursor: crosshair			《Mouse-Over》	Cursor en cruz, a menudo indica selección en un mapa de bits
text cursor: text			《Mouse-Over》	Texto seleccionable
vertical-text cursor: vertical-text			《Mouse-Over》	Texto vertical seleccionable
alias cursor: alias			《Mouse-Over》	Puede crear un alias o acceso directo
copy cursor: copy			《Mouse-Over》	Copiable
move cursor: move			《Mouse-Over》	Movible
no-drop cursor: no-drop			《Mouse-Over》	No se puede soltar en esa posición
not-allowed cursor: not-allowed			《Mouse-Over》	No se puede realizar la acción solicitada
grab cursor: grab			《Mouse-Over》	Arrastrable, generalmente combinado con grabbing
grabbing cursor: grabbing			《Mouse-Over》	Durante el arrastre, combinado con grab
all-scroll cursor: all-scroll			《Mouse-Over》	Se puede desplazar en cualquier dirección
col-resize cursor: col-resize			《Mouse-Over》	Caja redimensionable con movimiento de borde horizontal
row-resize cursor: row-resize			《Mouse-Over》	Caja redimensionable con movimiento de borde vertical
n-resize cursor: n-resize			《Mouse-Over》	Caja redimensionable con movimiento del borde hacia el norte (arriba)
w-resize cursor: w-resize			《Mouse-Over》	Caja redimensionable con movimiento del borde hacia el oeste (izquierda)
s-resize cursor: s-resize			《Mouse-Over》	Caja redimensionable con movimiento del borde hacia el sur (abajo)
e-resize cursor: e-resize			《Mouse-Over》	Caja redimensionable con movimiento del borde hacia el este (derecha)
nw-resize cursor: nw-resize			《Mouse-Over》	Caja redimensionable con movimiento del borde hacia el noroeste (arriba-izquierda)
ne-resize cursor: ne-resize			《Mouse-Over》	Caja redimensionable con movimiento del borde hacia el noreste (arriba-derecha)
sw-resize cursor: sw-resize			《Mouse-Over》	Caja redimensionable con movimiento del borde hacia el suroeste (abajo-izquierda)
se-resize cursor: se-resize			《Mouse-Over》	Caja redimensionable con movimiento del borde hacia el sureste (abajo-derecha)
ew-resize cursor: ew-resize			《Mouse-Over》	Caja redimensionable con movimiento de borde bidireccional horizontal
ns-resize cursor: ns-resize			《Mouse-Over》	Caja redimensionable con movimiento de borde bidireccional vertical
nesw-resize cursor: nesw-resize			《Mouse-Over》	Caja redimensionable con movimiento del borde en noreste-suroeste (arriba-derecha y abajo-izquierda)
nwse-resize cursor: nwse-resize			《Mouse-Over》	Caja redimensionable con movimiento del borde en noroeste-sureste (arriba-izquierda y abajo-derecha)
zoom-in cursor: zoom-in			《Mouse-Over》	Se puede hacer zoom in
zoom-out cursor: zoom-out			《Mouse-Over》	Se puede hacer zoom out
URL	Se puede establecer cualquier imagen como cursor. El tamaño de la imagen está limitado a 128 × 128px. El tamaño de la imagen de muestra es 70 × 70px. 《Mouse-Over》 .cursorimg {cursor: url(image-path), auto;} Copiar ".cursorimg" puede ser cualquier nombre. <div {cursor: url(image-path), auto;}>Texto</div> Copiar 《Compatibilidad con pantallas Retina》 .cursorimg {cursor: -webkit-image-set(url(@1x-image) 1x, url(@2x-image) 2x), auto;} Copiar

Cambiar el cursor con CSS= Tipos de cursores de ratón y configuraciones de CSS =

Cambiar el cursor con CSS
= Tipos de cursores de ratón y configuraciones de CSS =

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