Endre muspekeren med CSS - Typer av muspekere og CSS-innstillinger

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

Endre muspekeren med CSS
= Typer av muspekere og CSS-innstillinger =

På en nettside kan formen på muspekeren eller muspekeren settes ved hjelp av CSS-egenskapen "cursor".
Denne guiden utforsker CSS-verdier for forskjellige muspekertyper og hvordan du konfigurerer dem.
Du kan klikke på egenskapene for å kopiere dem. Denne siden inkluderer egenskapen "cursor:copy" for kopierbare elementer.
Eksempler på bilder er gitt for hver egenskap. Formen kan imidlertid variere avhengig av operativsystemversjon og nettleser.
Ved å holde musen over seksjonene "On Mouse" kan du se hvordan muspekeren ser ut i ditt miljø.

《Hvordan sette》

Hvis du vil bruke det på flere seksjoner på en side, er det vanlig å skrive følgende i <head>-seksjonen eller en ekstern CSS-fil.
".cursorstyle" er et tilpasset klassenavn.

<style>
.cursorstyle {
cursor : pointer;
}
</style> Kopier
Eksempel på å bruke ovennevnte CSS med "class"-attributtet.
<span class="cursorstyle">Tekst</span> Kopier

<div class="cursorstyle">Tekst</div> Kopier

<a class="cursorstyle">Tekst</a> Kopier
Eksempel på når du bruker dette på en enkelt seksjon eller noen få elementer.
Bruk "style"-attributtet og skriv egenskapen direkte.
<span style="cursor : pointer;">Tekst</span> Kopier

<div style="cursor : pointer;">Tekst</div> Kopier

《Cursor Types and CSS Values》

CSS Verdier [Klikk for å kopiere]	Eksempel i OS [Kan variere avhengig av nettleseren]		Mus-over Formforhåndsvisning	Beskrivelse
CSS Verdier [Klikk for å kopiere]	Windows	Mac	Mus-over Formforhåndsvisning	Beskrivelse
auto cursor: auto;			《Mouse-Over》	Nettleseren bestemmer automatisk markøren basert på konteksten
default cursor: default;			《Mouse-Over》	Viser en standard pil
none cursor: none			《Mouse-Over》	Viser ikke en markør
context-menu cursor: context-menu			《Mouse-Over》	Tillater bruk av en kontekstmeny
help cursor: help			《Mouse-Over》	Hjelpeelement
pointer cursor: pointer			《Mouse-Over》	Når du holder musen over en lenke, etc.
progress cursor: progress			《Mouse-Over》	Behandler en oppgave. Brukerinteraksjon er mulig
wait cursor: wait			《Mouse-Over》	Behandler en oppgave. Brukerinteraksjon er ikke mulig
cell cursor: cell			《Mouse-Over》	Valgbar tabellcelle
crosshair cursor: crosshair			《Mouse-Over》	Kryssmarkør, ofte brukt for valg på et bitmap
text cursor: text			《Mouse-Over》	Valgbart tekst
vertical-text cursor: vertical-text			《Mouse-Over》	Valgbart vertikal tekst
alias cursor: alias			《Mouse-Over》	Kan opprette et alias eller snarvei
copy cursor: copy			《Mouse-Over》	Kopierbar
move cursor: move			《Mouse-Over》	Flyttbar
no-drop cursor: no-drop			《Mouse-Over》	Kan ikke slippes på denne posisjonen
not-allowed cursor: not-allowed			《Mouse-Over》	Den ønskede handlingen kan ikke utføres
grab cursor: grab			《Mouse-Over》	Draggable, vanligvis sammen med grabbing
grabbing cursor: grabbing			《Mouse-Over》	Under draing, sammen med grab
all-scroll cursor: all-scroll			《Mouse-Over》	Kan rulle i alle retninger
col-resize cursor: col-resize			《Mouse-Over》	Størrelsesjusterbar boks med horisontal kantbevegelse
row-resize cursor: row-resize			《Mouse-Over》	Størrelsesjusterbar boks med vertikal kantbevegelse
n-resize cursor: n-resize			《Mouse-Over》	Størrelsesjusterbar boks med kantbevegelse mot nord (topp)
w-resize cursor: w-resize			《Mouse-Over》	Størrelsesjusterbar boks med kantbevegelse mot vest (venstre)
s-resize cursor: s-resize			《Mouse-Over》	Størrelsesjusterbar boks med kantbevegelse mot sør (bunn)
e-resize cursor: e-resize			《Mouse-Over》	Størrelsesjusterbar boks med kantbevegelse mot øst (høyre)
nw-resize cursor: nw-resize			《Mouse-Over》	Størrelsesjusterbar boks med kantbevegelse mot northwest (topp-venstre)
ne-resize cursor: ne-resize			《Mouse-Over》	Størrelsesjusterbar boks med kantbevegelse mot northeast (topp-høyre)
sw-resize cursor: sw-resize			《Mouse-Over》	Størrelsesjusterbar boks med kantbevegelse mot southwest (bunn-venstre)
se-resize cursor: se-resize			《Mouse-Over》	Størrelsesjusterbar boks med kantbevegelse mot southeast (bunn-høyre)
ew-resize cursor: ew-resize			《Mouse-Over》	Størrelsesjusterbar boks med to-veis horisontal kantbevegelse
ns-resize cursor: ns-resize			《Mouse-Over》	Størrelsesjusterbar boks med to-veis vertikal kantbevegelse
nesw-resize cursor: nesw-resize			《Mouse-Over》	Størrelsesjusterbar boks med kantbevegelse i nordøst-sørvest (topp-høyre & bunn-venstre) retninger
nwse-resize cursor: nwse-resize			《Mouse-Over》	Størrelsesjusterbar boks med kantbevegelse i nordvest-sørøst (topp-venstre & bunn-høyre) retninger
zoom-in cursor: zoom-in			《Mouse-Over》	Kan zoome inn
zoom-out cursor: zoom-out			《Mouse-Over》	Kan zoome ut
URL	Alle bilder kan settes som en markør. Bilde størrelse er begrenset til 128 × 128px. Eksempel bilde størrelse er 70 × 70px. 《Mouse-Over》 .cursorimg {cursor: url(image-path), auto;} Kopier ".cursorimg" kan være hvilket som helst navn. <div {cursor: url(image-path), auto;}>Text</div> Kopier 《Retina Display Support》 .cursorimg {cursor: -webkit-image-set(url(@1x-image) 1x, url(@2x-image) 2x), auto;} Kopier

Endre muspekeren med CSS= Typer av muspekere og CSS-innstillinger =

Endre muspekeren med CSS
= Typer av muspekere og CSS-innstillinger =

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