Egérkurzor módosítása CSS-sel - Egérkurzor típusok és CSS beállítások

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でカーソルを変える

Egérkurzor módosítása CSS-sel
= Egérkurzor típusok és CSS beállítások =

Egy weboldalon az egérkurzor vagy az egérmutató alakja a CSS "cursor" tulajdonságával állítható be.
Ez az útmutató bemutatja a különböző kurzorformákhoz használható CSS értékeket és azok beállítási módját.
A tulajdonságokra kattintva kimásolhatja azokat. Az oldalon megtalálható a "cursor:copy" tulajdonság is a másolható elemek számára.
Minden tulajdonsághoz példaképeket biztosítunk. Azonban az alak eltérhet az operációs rendszer és a böngésző verziójától függően.
A „Rámutatáskor” szakaszok fölé húzva az egeret megtekintheti, hogyan jelenik meg a kurzor az Ön környezetében.

《Beállítás módja》

Ha több szakaszra szeretné alkalmazni egy oldalon, akkor általában az alábbiakat írja be a <head> szakaszba vagy egy külső CSS fájlba.
A ".cursorstyle" egy egyedi osztálynév.

<style>
.cursorstyle {
cursor : pointer;
}
</style> Másolás
Példa a fenti CSS alkalmazására a "class" attribútummal.
<span class="cursorstyle">Szöveg</span> Másolás

<div class="cursorstyle">Szöveg</div> Másolás

<a class="cursorstyle">Szöveg</a> Másolás
Példa, amikor csak egy szakaszra vagy néhány elemre szeretné alkalmazni.
Használja a "style" attribútumot, és írja be közvetlenül a tulajdonságot.
<span style="cursor : pointer;">Szöveg</span> Másolás

<div style="cursor : pointer;">Szöveg</div> Másolás

《Kurzor típusok és CSS értékek》

CSS értékek [Kattintás másoláshoz]	Minta OS-ben [Böngészőtől függően eltérhet]		Egér fölé Alak előnézet	Leírás
CSS értékek [Kattintás másoláshoz]	Windows	Mac	Egér fölé Alak előnézet	Leírás
auto cursor: auto;			《Egér fölé》	A böngésző automatikusan meghatározza a kurzort a kontextus alapján
default cursor: default;			《Egér fölé》	Alapértelmezett nyíl megjelenítése
none cursor: none			《Egér fölé》	Kurzor nem jelenik meg
context-menu cursor: context-menu			《Egér fölé》	Lehetővé teszi a helyi menü használatát
help cursor: help			《Egér fölé》	Súgó elem
pointer cursor: pointer			《Egér fölé》	Ha az egér egy hivatkozás fölé kerül
progress cursor: progress			《Egér fölé》	Feladat feldolgozása. A felhasználói interakció lehetséges
wait cursor: wait			《Egér fölé》	Feladat feldolgozása. A felhasználói interakció nem lehetséges
cell cursor: cell			《Egér fölé》	Kijelölhető táblázatcella
crosshair cursor: crosshair			《Egér fölé》	Keresztezett kurzor, gyakran bitmap kijelölésére
text cursor: text			《Egér fölé》	Kijelölhető szöveg
vertical-text cursor: vertical-text			《Egér fölé》	Kijelölhető függőleges szöveg
alias cursor: alias			《Egér fölé》	Alias vagy parancsikon létrehozható
copy cursor: copy			《Egér fölé》	Másolható
move cursor: move			《Egér fölé》	Mozgatható
no-drop cursor: no-drop			《Egér fölé》	Nem lehet ide dobni
not-allowed cursor: not-allowed			《Egér fölé》	A kért művelet nem hajtható végre
grab cursor: grab			《Egér fölé》	Húzható, általában grabbing kurzorral párosítva
grabbing cursor: grabbing			《Egér fölé》	Húzás közben grab kurzorral párosítva
all-scroll cursor: all-scroll			《Egér fölé》	Bármely irányba görgethető
col-resize cursor: col-resize			《Egér fölé》	Átméretezhető doboz vízszintes élmozgatással
row-resize cursor: row-resize			《Egér fölé》	Átméretezhető doboz függőleges élmozgatással
n-resize cursor: n-resize			《Egér fölé》	Átméretezhető doboz élmozgatással észak (felső) irányba
w-resize cursor: w-resize			《Egér fölé》	Átméretezhető doboz élmozgatással nyugat (balra) irányba
s-resize cursor: s-resize			《Egér fölé》	Átméretezhető doboz élmozgatással dél (alsó) irányba
e-resize cursor: e-resize			《Egér fölé》	Átméretezhető doboz élmozgatással kelet (jobbra) irányba
nw-resize cursor: nw-resize			《Egér fölé》	Átméretezhető doboz élmozgatással északnyugat (bal felső) irányba
ne-resize cursor: ne-resize			《Egér fölé》	Átméretezhető doboz élmozgatással északkelet (jobb felső) irányba
sw-resize cursor: sw-resize			《Egér fölé》	Átméretezhető doboz élmozgatással délnyugat (bal alsó) irányba
se-resize cursor: se-resize			《Egér fölé》	Átméretezhető doboz élmozgatással délkelet (jobb alsó) irányba
ew-resize cursor: ew-resize			《Egér fölé》	Átméretezhető doboz kétirányú vízszintes élmozgatással
ns-resize cursor: ns-resize			《Egér fölé》	Átméretezhető doboz kétirányú függőleges élmozgatással
nesw-resize cursor: nesw-resize			《Egér fölé》	Átméretezhető doboz élmozgatással északkelet-délnyugat (jobb felső és bal alsó) irányokban
nwse-resize cursor: nwse-resize			《Egér fölé》	Átméretezhető doboz élmozgatással északnyugat-délkelet (bal felső és jobb alsó) irányokban
zoom-in cursor: zoom-in			《Egér fölé》	Nagyítható
zoom-out cursor: zoom-out			《Egér fölé》	Kicsinyíthető
URL	Bármely kép beállítható kurzorként. A kép mérete 128 × 128px-re korlátozott. A minta kép mérete 70 × 70px. 《Egér fölé》 .cursorimg {cursor: url(image-path), auto;} Másolás A ".cursorimg" bármilyen név lehet. <div {cursor: url(image-path), auto;}>Szöveg</div> Másolás 《Retina kijelző támogatás》 .cursorimg {cursor: -webkit-image-set(url(@1x-image) 1x, url(@2x-image) 2x), auto;} Másolás

Egérkurzor módosítása CSS-sel= Egérkurzor típusok és CSS beállítások =

Egérkurzor módosítása CSS-sel
= Egérkurzor típusok és CSS beállítások =

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