Změna kurzoru pomocí CSS - Typy kurzorů myši a nastavení 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でカーソルを変える

Změna kurzoru pomocí CSS
= Typy kurzorů myši a nastavení CSS =

Na webové stránce lze tvar kurzoru myši nebo ukazatele nastavit pomocí vlastnosti CSS „cursor“.
Tato příručka zkoumá hodnoty CSS pro různé tvary kurzorů a jejich konfiguraci.
Můžete kliknout na vlastnosti pro jejich zkopírování. Tato stránka obsahuje vlastnost "cursor:copy" pro kopírovatelné prvky.
Pro každou vlastnost jsou k dispozici ukázkové obrázky. Tvary se však mohou lišit v závislosti na verzi operačního systému a prohlížeči.
Přesunutím myši na sekce „Na myši“ uvidíte kurzor tak, jak se zobrazuje ve vašem prostředí.

《Jak nastavit》

Pokud chcete použít styl na více sekcí na stránce, je běžné napsat následující do sekce <head> nebo externího souboru CSS.
".cursorstyle" je vlastní název třídy.

<style>
.cursorstyle {
cursor : pointer;
}
</style> Kopírovat
Příklad použití výše uvedeného CSS pomocí atributu "class".
<span class="cursorstyle">Text</span> Kopírovat

<div class="cursorstyle">Text</div> Kopírovat

<a class="cursorstyle">Text</a> Kopírovat
Příklad použití stylu na jednu sekci nebo několik prvků.
Použijte atribut "style" a vlastnost napište přímo.
<span style="cursor : pointer;">Text</span> Kopírovat

<div style="cursor : pointer;">Text</div> Kopírovat

《Typy kurzorů a hodnoty CSS》

Hodnoty CSS [Kliknutím zkopírujte]	Ukázka v OS [Může se lišit podle prohlížeče]		Náhled tvaru při najetí	Popis
Hodnoty CSS [Kliknutím zkopírujte]	Windows	Mac	Náhled tvaru při najetí	Popis
auto cursor: auto;			《Najetí myší》	Prohlížeč automaticky určuje kurzor podle kontextu
default cursor: default;			《Najetí myší》	Zobrazuje standardní šipku
none cursor: none			《Najetí myší》	Nezobrazuje kurzor
context-menu cursor: context-menu			《Najetí myší》	Umožňuje použití kontextové nabídky
help cursor: help			《Najetí myší》	Položka nápovědy
pointer cursor: pointer			《Najetí myší》	Při najetí na odkaz apod.
progress cursor: progress			《Najetí myší》	Probíhá úloha. Uživatel může interagovat
wait cursor: wait			《Najetí myší》	Probíhá úloha. Uživatel nemůže interagovat
cell cursor: cell			《Najetí myší》	Vybratelná buňka tabulky
crosshair cursor: crosshair			《Najetí myší》	Křížový kurzor, často označuje výběr v bitové mapě
text cursor: text			《Najetí myší》	Vybratelný text
vertical-text cursor: vertical-text			《Najetí myší》	Vybratelný svislý text
alias cursor: alias			《Najetí myší》	Lze vytvořit alias nebo zástupce
copy cursor: copy			《Najetí myší》	Lze kopírovat
move cursor: move			《Najetí myší》	Lze přesunout
no-drop cursor: no-drop			《Najetí myší》	Nelze upustit na tuto pozici
not-allowed cursor: not-allowed			《Najetí myší》	Požadovanou akci nelze provést
grab cursor: grab			《Najetí myší》	Lze přetahovat, obvykle spárováno s grabbing
grabbing cursor: grabbing			《Najetí myší》	Během přetahování, spárováno s grab
all-scroll cursor: all-scroll			《Najetí myší》	Lze posouvat všemi směry
col-resize cursor: col-resize			《Najetí myší》	Změna velikosti boxu vodorovným směrem
row-resize cursor: row-resize			《Najetí myší》	Změna velikosti boxu svislým směrem
n-resize cursor: n-resize			《Najetí myší》	Změna velikosti boxu směrem na sever (nahoru)
w-resize cursor: w-resize			《Najetí myší》	Změna velikosti boxu směrem na západ (vlevo)
s-resize cursor: s-resize			《Najetí myší》	Změna velikosti boxu směrem na jih (dolů)
e-resize cursor: e-resize			《Najetí myší》	Změna velikosti boxu směrem na východ (vpravo)
nw-resize cursor: nw-resize			《Najetí myší》	Změna velikosti boxu směrem na severozápad (levý horní roh)
ne-resize cursor: ne-resize			《Najetí myší》	Změna velikosti boxu směrem na severovýchod (pravý horní roh)
sw-resize cursor: sw-resize			《Najetí myší》	Změna velikosti boxu směrem na jihozápad (levý dolní roh)
se-resize cursor: se-resize			《Najetí myší》	Změna velikosti boxu směrem na jihovýchod (pravý dolní roh)
ew-resize cursor: ew-resize			《Najetí myší》	Změna velikosti boxu s vodorovným obousměrným pohybem
ns-resize cursor: ns-resize			《Najetí myší》	Změna velikosti boxu s svislým obousměrným pohybem
nesw-resize cursor: nesw-resize			《Najetí myší》	Změna velikosti boxu směrem na severovýchod-jihozápad (pravý horní a levý dolní roh)
nwse-resize cursor: nwse-resize			《Najetí myší》	Změna velikosti boxu směrem na severozápad-jihovýchod (levý horní a pravý dolní roh)
zoom-in cursor: zoom-in			《Najetí myší》	Lze přiblížit
zoom-out cursor: zoom-out			《Najetí myší》	Lze oddálit
URL	Jako kurzor lze nastavit libovolný obrázek. Velikost obrázku je omezena na 128 × 128px. Ukázková velikost obrázku je 70 × 70px. 《Najetí myší》 .cursorimg {cursor: url(image-path), auto;} Kopírovat ".cursorimg" může být libovolný název. <div {cursor: url(image-path), auto;}>Text</div> Kopírovat 《Podpora Retina displejů》 .cursorimg {cursor: -webkit-image-set(url(@1x-image) 1x, url(@2x-image) 2x), auto;} Kopírovat

Změna kurzoru pomocí CSS= Typy kurzorů myši a nastavení CSS =

Změna kurzoru pomocí CSS
= Typy kurzorů myši a nastavení CSS =

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