Ändra muspekaren med CSS - Typer av muspekare och CSS-inställningar

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

Ändra muspekaren med CSS
= Typer av muspekare och CSS-inställningar =

På en webbsida kan muspekaren eller muspekaren formas med hjälp av CSS-egenskapen "cursor".
Den här guiden utforskar CSS-värden för olika muspekartyper och hur du konfigurerar dem.
Du kan klicka på egenskaperna för att kopiera dem. Den här sidan inkluderar egenskapen "cursor:copy" för element som kan kopieras.
Exempelbilder ges för varje egenskap. Formen kan dock skilja sig beroende på ditt operativsystem och webbläsare.
Genom att hovra över "On Mouse"-sektionerna kan du se muspekaren som den visas i din miljö.

《Hur man ställer in》

Om du vill tillämpa det på flera sektioner på en sida är det vanligt att skriva följande i <head>-sektionen eller en extern CSS-fil.
".cursorstyle" är ett anpassat klassnamn.

<style>
.cursorstyle {
cursor : pointer;
}
</style> Kopiera
Exempel på att tillämpa ovanstående CSS med hjälp av "class"-attributet.
<span class="cursorstyle">Text</span> Kopiera

<div class="cursorstyle">Text</div> Kopiera

<a class="cursorstyle">Text</a> Kopiera
Exempel när du tillämpar på en enskild sektion eller några få element.
Använd "style"-attributet och skriv egenskapen direkt.
<span style="cursor : pointer;">Text</span> Kopiera

<div style="cursor : pointer;">Text</div> Kopiera

《Cursor Types and CSS Values》

CSS-värden [Klicka för att kopiera]	Exempel i OS [Kan variera beroende på webbläsare]		Muspekare Form Förhandsvisning	Beskrivning
CSS-värden [Klicka för att kopiera]	Windows	Mac	Muspekare Form Förhandsvisning	Beskrivning
auto cursor: auto;			《Mouse-Over》	Webbläsaren bestämmer automatiskt muspekaren baserat på sammanhanget
default cursor: default;			《Mouse-Over》	Visar en standardpil
none cursor: none			《Mouse-Over》	Visar ingen muspekare
context-menu cursor: context-menu			《Mouse-Over》	Tillåter användning av kontextmeny
help cursor: help			《Mouse-Over》	Hjälpobjekt
pointer cursor: pointer			《Mouse-Over》	När du hovrar över en länk, etc.
progress cursor: progress			《Mouse-Over》	Bearbetar en uppgift. Användarinteraktion är möjlig
wait cursor: wait			《Mouse-Over》	Bearbetar en uppgift. Användarinteraktion är inte möjlig
cell cursor: cell			《Mouse-Over》	Väljbar tabellcell
crosshair cursor: crosshair			《Mouse-Over》	Korspekare, ofta som indikation för val på en bitmap
text cursor: text			《Mouse-Over》	Väljbar text
vertical-text cursor: vertical-text			《Mouse-Over》	Väljbar vertikal text
alias cursor: alias			《Mouse-Over》	Kan skapa ett alias eller genväg
copy cursor: copy			《Mouse-Over》	Kopierbar
move cursor: move			《Mouse-Over》	Flyttbar
no-drop cursor: no-drop			《Mouse-Over》	Kan inte släppas på den positionen
not-allowed cursor: not-allowed			《Mouse-Over》	Den begärda åtgärden kan inte utföras
grab cursor: grab			《Mouse-Over》	Draggable, vanligtvis i kombination med grabbing
grabbing cursor: grabbing			《Mouse-Over》	Under dragning, i kombination med grab
all-scroll cursor: all-scroll			《Mouse-Over》	Kan rulla i alla riktningar
col-resize cursor: col-resize			《Mouse-Over》	Justera storlek på box med horisontell kantrörelse
row-resize cursor: row-resize			《Mouse-Over》	Justera storlek på box med vertikal kantrörelse
n-resize cursor: n-resize			《Mouse-Over》	Justera storlek på box med kantrörelse mot nord (över)
w-resize cursor: w-resize			《Mouse-Over》	Justera storlek på box med kantrörelse mot väst (vänster)
s-resize cursor: s-resize			《Mouse-Over》	Justera storlek på box med kantrörelse mot syd (under)
e-resize cursor: e-resize			《Mouse-Over》	Justera storlek på box med kantrörelse mot öst (höger)
nw-resize cursor: nw-resize			《Mouse-Over》	Justera storlek på box med kantrörelse mot nordväst (över-vänster)
ne-resize cursor: ne-resize			《Mouse-Over》	Justera storlek på box med kantrörelse mot nordost (över-höger)
sw-resize cursor: sw-resize			《Mouse-Over》	Justera storlek på box med kantrörelse mot sydväst (under-vänster)
se-resize cursor: se-resize			《Mouse-Over》	Justera storlek på box med kantrörelse mot sydost (under-höger)
ew-resize cursor: ew-resize			《Mouse-Over》	Justera storlek på box med tvåvägs horisontell kantrörelse
ns-resize cursor: ns-resize			《Mouse-Over》	Justera storlek på box med tvåvägs vertikal kantrörelse
nesw-resize cursor: nesw-resize			《Mouse-Over》	Justera storlek på box med kantrörelse i nordost-sydväst (över-höger & under-vänster) riktningar
nwse-resize cursor: nwse-resize			《Mouse-Over》	Justera storlek på box med kantrörelse i nordväst-sydost (över-vänster & under-höger) riktningar
zoom-in cursor: zoom-in			《Mouse-Over》	Kan zooma in
zoom-out cursor: zoom-out			《Mouse-Over》	Kan zooma ut
URL	Valfri bild kan ställas in som muspekare. Bildstorleken är begränsad till 128 × 128px. Exempelbildens storlek är 70 × 70px. 《Mouse-Over》 .cursorimg {cursor: url(image-path), auto;} Kopiera ".cursorimg" kan vara vilket namn som helst. <div {cursor: url(image-path), auto;}>Text</div> Kopiera 《Retina Display Support》 .cursorimg {cursor: -webkit-image-set(url(@1x-image) 1x, url(@2x-image) 2x), auto;} Kopiera

Ändra muspekaren med CSS= Typer av muspekare och CSS-inställningar =

Ändra muspekaren med CSS
= Typer av muspekare och CSS-inställningar =

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